blob: 57c1b3412ad53ec77888bc8abdd98d0b7cbc9739 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
---
title: 调试框架脚本
slug: Mozilla/Firefox/Multiprocess_Firefox/Debugging_frame_scripts
translation_of: Mozilla/Firefox/Multiprocess_Firefox/Debugging_frame_scripts
---
<div>{{FirefoxSidebar}}</div><div class="geckoVersionNote">
<p>浏览器内容工具箱仅在 Firefox Nightly 中可用，并且仅在多进程模式下可用。</p>
</div>
<p>你可以使用浏览器内容工具箱来调试框架脚本。浏览器内容工具箱是一个单独的窗口，它包括一些共享的 <a href="/en-US/docs/Tools">Firefox 开发者工具</a>，具体来说：<a href="/en-US/docs/Web/API/Console">控制台</a>，<a href="/en-US/docs/Tools/Debugger">JavaScript 调试器</a>，以及<a href="/en-US/docs/Tools/Scratchpad">代码草稿纸</a> —— 但它们着重于浏览器的内容进程。这意味着你可以调试你的附加组件中的框架脚本。</p>
<h2 id="打开浏览器内容工具箱">打开浏览器内容工具箱</h2>
<p>{{EmbedYouTube("Cg6X_zIu7Xk")}}</p>
<p>要打开浏览器内容工具箱，你需要：</p>
<ul>
<li>正在运行 Firefox Nightly</li>
<li>多进程 Firefox 已启用：打开“选项”页面，选择"启用 E10S (多进程)“，然后重新启动。在你运行多进程 Firefox 时，一个虚拟指示符会出现，远程选项卡的标题会有下划线。</li>
<li>在 Firefox 开发者工具的设置中启用 <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">"chrome 和附加组件调试" 和 "远程调试"</a>。</li>
</ul>
<p>你应该已经在 Firefox 菜单中 ”Web 开发者“的子菜单中看到”浏览器内容工具箱“（或者工具菜单，如果你显示了菜单栏，或者在 OS X）。它会打开一个单独的窗口：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/9761/browser-content-toolbox.png" style="display: block; height: 854px; margin-left: auto; margin-right: auto; width: 723px;">If you've used the <a href="/en-US/docs/Tools/Tools_Toolbox">Firefox Developer Tools</a> before, this should look pretty familiar.</p>
<p>Along the top is a row of tabs that you can use to switch the active tool. Currently we only support the <a href="/en-US/docs/Web/API/Console">Console</a>, the <a href="/en-US/docs/Tools/Debugger">Debugger</a>, and <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> in the Browser Content Toolbox. At the right of this row are three buttons that activate the <a href="/en-US/docs/Tools/Web_Console#The_split_console">split console</a>, open settings, and close the toolbox.</p>
<p>The rest of the toolbox is taken up with the tool you've currently selected.</p>
<h2 id="使用">使用</h2>
<p>{{EmbedYouTube("XF0ULNnNOxg")}}</p>
<h3 id="调试器">调试器</h3>
<p>The Debugger lists all the scripts that are loaded into the content process. You'll find your frame scripts listed under the chrome:// URL you registered for them:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/9771/browser-content-toolbox-listing.png" style="display: block; margin-left: auto; margin-right: auto; width: 723px;">You can set breakpoints, of course, and do all the other <a href="/en-US/docs/Tools/Debugger">things supported by the debugger</a>.</p>
<h3 id="控制台">控制台</h3>
<p>The Console logs output from your frame scripts. If you want to use it to evaluate JavaScript in your frame script's scope, there's a trick you need to know:</p>
<ul>
<li>在你的框架脚本中设置一个断点。</li>
<li>When you hit the breakpoint, switch to the Console, or activate the <a href="/en-US/docs/Tools/Web_Console#The_split_console">split console</a> by pressing "Escape".</li>
</ul>
<p>Now the console's scope is your frame script's scope, and you can interact directly with it:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/9769/browser-content-toolbox-debugging.png" style="display: block; margin-left: auto; margin-right: auto; width: 839px;"></p>
|
