问题标签 [firefox-developer-tools]

原因 ：

我有一个复杂的 Web 应用程序，它由单个页面上的许多 iframe 组成。它是这样设计的，因此 iframe 中的页面可以在不重新加载整个页面的情况下进行调试和重新加载。不幸的是，自从JSD2 实现以来，iframe 无法在 Firebug 的脚本面板或 Firefox 开发人员工具的调试器面板中正确重新加载。

我想知道是否应该停止等待上述问题得到修复或更改为单页格式并为每个面板动态重新加载 HTML、CSS 和 JavaScript。

我遇到的问题是重新加载<script>元素。您似乎无法将更多代码加载到<script>已包含文件的元素中。您必须删除该元素并创建一个新元素。这会导致断点丢失，并且在调试器/脚本面板的源列表中出现一长串已失效的列表。

问题：

当不想重新加载整个页面时，在页面中重新加载修改后的 JavaScript 文件的最佳方法是什么？

我在开发者工具中做了很多工作，并且喜欢在控制台中使用 jQuery 来运行代码片段。要将 jQuery 注入页面（和控制台），我将其粘贴到 devtools 控制台中：

有没有办法将 jQuery 自动注入开发人员工具控制台？理想情况下，不影响window.$或window.jQuery用于当前页面。

我在浏览器工具箱中看到了这个：

我认为它会将我的叠加层与相同的 ID 结合起来 - 为什么它会创建两个具有相同 ID 的？

源代码在这里。

我想知道下面显示的序列是如何发生的。

这是有问题的功能：

以下是我调试对该函数的调用时发生的情况：

1. 从第 32 行开始。

2. Step In，前进到第 33 行。

3. 再次 Step In，前进到第 34 行。

4. 再进一次，前进到第 36 行？？？

--> 怎么可能直接从 if 块的最后一行到else块的第一行呢？

一些重要的事实：

1. 这里没有遗漏的步骤。
2. 这真的发生了。
3. 我只sendMessage从一个地方打电话，当那个电话发生时我正在记录。日志中没有下落不明的sendMessage呼叫，所以我不认为异步是一种解释。
4. 我也用 Firebug 调试器尝试了同样的事情，同样疯狂的事情发生了。

编辑/跟进

如果我将 console.log 语句添加到 else 块的第一行（将警报向下推到第 37 行），控件将从第 34 行直接转到第 37 行（跳过 console.log 语句）。

另外，我应该提到，即使直接进入该代码，实际上也不会出现任何警报。

编辑 2

这是sendMessage函数的间距和 CRLF：

在上面的 gif 中，您可以看到我在.entry-content a使用 Firefox DevTools 为样式添加新规则时遇到问题。在我的一生中，我无法让这个流程发挥作用：

1. 右键单击 > 新规则
2. 类型.entry-content a
3. 点击标签
4. 开始添加 CSS

有什么我想念的吗？当我离开 Chrome 时，我使用 Firefox 作为我的开发浏览器才几个月（不会讨论），所以这是我习惯的环境。

I've been wracking my brain over this and cannot figure it out for the life of me.

Here's a test page I built for the sake of this discussion:

http://jsbin.com/garokalocu

Let's assume this page is very complex and I didn't build it, and I'm trying to see the code that runs when the user clicks "Do It." So I open the debugger, open the side pane and click "Events." I checkmark the click event for #execute which is the button.

Now I click the button, and the code hits the breakpoint. But strangely, the name "Bob" has already been filled in, so clearly it flew right past the actual code, and lands me here:

I don't understand what's going on here. So I tried something else, a new feature in Firefox that I thought might be handy. If I inspect the code, there are little "ev" tags on certain DOM elements. Supposedly you can click those and see the code.

Well, that was fruitless. I'd be forever grateful if someone could please tell me how on earth to debug jQuery events, and see the actual code that gets executed. Thanks!

从 Firefox 33 开始，开发工具中有一个 GUI 选项可以在编辑器中使用不同样式的键绑定。这很棒，但这是功能结束的地方。如何编辑编辑器的特定键绑定？

我使用 Sublime 键绑定，但一个烦恼是它捕获cmd/ctrl+T并转置字符而不是打开一个新选项卡。这非常烦人，我一直在寻找一种从 FF 源代码编辑此文件的方法，但在任何地方都找不到。下载 FF 源代码、编辑它并创建我自己的构建不是一种选择。

我正在尝试保存在Firefox Developer Edition的Inspector 选项卡上完成的 CSS 更改。

据我所知，您只能将 CSS 保存在 Style Editor 选项卡中，但它不反映使用 Inspector Tool 所做的更改。

无论如何从 Inspector 选项卡中编辑样式编辑器中的 css 吗？

由于我使用 jQuery 绑定到单击事件，因此很难弄清楚该代码在我的应用程序中的位置。

chrome 中的事件侦听器面板如下所示：

但是，当单击定义时，我被带到 jquery。即使我对 jquery 脚本进行了黑箱化，也无法确定将哪个函数发送到 jQuery。

在 Firefox 开发者版中看到类似的东西：

刚刚安装了新的 Firefox 开发者版，其中一个功能是在其他浏览器中远程检查网站。所以我打开了我的网站并输入了firefox的新命令行“ios”来在safary上测试它，但得到了错误TypeError: response is null 。

有人已经试过了吗？任何想法如何使这项工作？谢谢