blob: b95c830ccd65ed30a9c3e9ea1b0862b677516d7c (
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
|
---
title: Browser Toolbox
slug: Tools/Browser_Toolbox
tags:
- console.log不显示
- 浏览器工具箱
- 火狐
- 网页工具箱
- 调试
translation_of: Tools/Browser_Toolbox
---
<div>{{ToolsSidebar}}</div><p>浏览器工具箱和普通的<a href="/en-US/docs/Tools_Toolbox">工具箱</a>类似，但前者是应用于整个浏览器而不是单个的内容标签页。它可以让你在整个浏览器的环境中运行普通的火狐开发者工具，而不是单个网页。这让你可以debug扩展和浏览器自身的JavaScript代码，而不仅仅是网页的。</p>
<p><em>提示：如果你想调试某个免重启或者基于SDK的附加组件、可以尝试使用 <a href="https://developer.mozilla.org/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a>. 这两种情况之外的都可以使用浏览器工具箱.</em></p>
<h3 id="开启浏览器工具箱设置">开启浏览器工具箱设置</h3>
<p>这里说的是在网页工具箱里开启<strong>浏览器工具箱</strong>相关选项、默认是没有开启的，你可以：</p>
<ul>
<li>打开<a href="/en-US/docs/Tools_Toolbox#Settings">开发者工具箱-设置</a>--<a href="/en-US/docs/Tools/Settings#Advanced_settings">高级设置</a></li>
<li>检查选项："开启的chrome和附加组件调试"，"开启远程调试"</li>
<li>如上操作如果仍看不到console输出、跳到下面"<strong>打开浏览器工具箱</strong>"</li>
</ul>
<h3 id="打开浏览器工具箱"><strong>打开浏览器工具箱</strong></h3>
<p>在Firefox浏览器<strong>顶部菜单</strong>(可能自动隐藏了)依次打开<strong>工具</strong>--<strong>Web开发者</strong>--<strong>浏览器工具箱</strong> 即可。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6661/open-menu.png" style="display: block; height: 477px; margin-left: auto; margin-right: auto; width: 508px;">点击菜单项，一个像这样的会话便会呈现在你的面前:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6663/warning.png" style="display: block; height: 243px; margin-left: auto; margin-right: auto; width: 554px;">点击OK，然后浏览器工具箱便会以独立的窗口打开:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6665/browser-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">友情提示：如果只是要查看整个浏览器级别的控制台日志输出依次点击<strong>顶部菜单</strong>(可能自动隐藏了)--<strong>工具</strong>--<strong>Web开发者</strong>--<strong>浏览器工具箱</strong>即可。正常我们调试还是切换到相应页面直接按F12就行了。</p>
<p>你可以查看、调试所有被浏览器本身加载的或是任何后添加的且在运行着的JavaScript文件。总之，你可以使用下列的开发者工具:</p>
<ul>
<li><a href="/en-US/docs/Tools/Debugger">调试器</a></li>
<li><a href="/en-US/docs/Tools/Browser_Console">控制台</a></li>
<li><a href="/en-US/docs/Tools/Style_Editor">样式编辑器</a></li>
<li><a href="/en-US/docs/Tools/Profiler">分析器</a></li>
<li><a href="/en-US/docs/Tools/Network_Monitor">网络监视器</a></li>
<li><a href="/en-US/docs/Tools/Scratchpad">缓存器</a></li>
<li><a href="/en-US/docs/Tools/Page_Inspector">页面检查器</a></li>
</ul>
<p> </p>
<p> </p>
|
