如何从 Google Developer Console 的对话框页面访问 Javascript？答案

【问题标题】：How can I access Javascript from Dialog page in Google Developer Console?如何从 Google Developer Console 的对话框页面访问 Javascript？
【发布时间】：2013-05-10 01:29:11
【问题描述】：

在 Chrome 上，有人知道如何允许 Google Developer Console 访问链接到从对话框页面请求的 HTML 页面的 javascript 文件吗？在我的网站中，可以从包含 HTML 页面的窗口轻松访问所有 javascript 文件，但是当我打开一个通过 JQuery 请求 HTML 页面的对话框时，链接的 javascript 文件不会出现在控制台中。

以下是我如何启动嵌入了 HTML（链接）的对话框：

function load_dialog(link, title, width, height){

//Take care of the options first.
var options = {

    autoOpen: true,
    position: "top",
    closeOnEscape: true,
    title: title,
    width: width,
    height: height,
    modal: true,
    resizable: false,
    show: {effect:"fade", duration:500},
    close: function (event, ui){
        dialog_box.dialog("destroy").remove();
    }
};

//Launch the dialog.
var dialog_box = $("<div></div>").load(link).dialog(options);
return false;

}

我还应该补充一点，当我通过新窗口打开对话框时，可以看到链接到此 HTML 的 javascript。

提前致谢！

【问题讨论】：

标签： javascript html google-chrome

【解决方案1】：

我对这个问题很好奇，因为我问过自己同样的问题。我希望你的意思是你没有在 Sources 标签中看到它，因为正如 andyb 所说，它出现在 Network 标签中，但没有机会调试动态添加的文件。

经过一番谷歌搜索后，我偶然发现了一个 stackoverflow thread 问了一个类似的问题。

这是他们想出的：

如果你想设置一个断点，只需在你想要的行中添加debugger;。如果整个文件应该列在 Sources 选项卡中，您可以添加一个

//@ sourceURL=myfile.js
//or 
//@ sourceURL=path/to/js/myfile.js

在您加载的文件的末尾。

我还找到了一个 Chrome 开发者工具文档entry，它描述了你必须做什么。不幸的是，演示被破坏了（错误出现在控制台中）

【讨论】：

啊，太棒了！感谢您的帮助 - 做到了。我希望这在 Chrome 开发者工具文档中更明显。

【解决方案2】：

是的，使用Network 选项卡显示浏览器加载的每个资源。在 DevTools 控制台的底部，您还可以选择 Scripts 来过滤掉其他资源。

【讨论】：