blob: c7a2cfc30483dd9236768a2d676ee1e44f0f11e3 (
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: 小技巧
slug: Tools/小技巧
tags:
- 开发工具
- 网络开发
translation_of: Tools/Tips
---
<div>{{ToolsSidebar}}</div>
<h2 id="常规">常规</h2>
<p>截图:</p>
<ul>
<li>页面截图: 点击截图按钮 (<img alt="Button to take screenshots of the entire page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;">;需要在<a href="/en-US/docs/Tools/Tools_Toolbox#Extra_tools">工具箱</a>激活)。</li>
<li>视窗截图: 在<a href="/en-US/docs/Tools/Responsive_Design_Mode#Responsive_Design_Mode_controls">响应式设计视图模式</a>下点击截图按钮 (<img alt="Button to take screenshots of the entire page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;">) 。</li>
<li>节点截图: 在查看器中右击节点并点击 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Screenshot Node">"节点截图"</a>。</li>
<li>通过 <a href="/en-US/docs/Tools/GCLI#Commands">Developer Toolbar command</a>: <code>screenshot [filename] [options]</code>.</li>
</ul>
<p>设置:</p>
<ul>
<li>为开发者工具设置一个 <a href="/en-US/docs/Tools/Settings#Choose_DevTools_theme">主题</a> .</li>
<li><a href="/en-US/docs/Tools/Settings#Editor_Preferences">改变按键绑定</a> 为你所熟悉的其他编辑器，如 Vim, Emacs 或Sublime Text。</li>
<li>激活或取消不同的工具 (还有更多的工具!)。</li>
</ul>
<h2 id="页面查看器">页面查看器</h2>
<p>在 <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">标签视图</a>中:</p>
<ul>
<li>选择节点并按下 <kbd>H</kbd> 键来隐藏/显示该节点。</li>
<li>选择节点并按下 <kbd>Backspace</kbd> 或 <kbd>Del</kbd> 键来删除该节点。</li>
<li>按住 <kbd>Alt</kbd> 键并点击该节点来展开该节点及其所有子节点。</li>
<li>点击最后一个 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">面包屑导航按钮</a>来使查看器页面滚动到该节点.</li>
<li>点击节点后面的“ev”图标 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">来查看所以绑定在该节点上的事件监听器</a>。</li>
<li>选择节点并按下 <kbd>S</kbd> 键来在页面中查看该节点 (也可以用过右击该节点并点击 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Scroll Into View">"画面滚动到节点"</a>)。</li>
<li>右击节点并点击 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">"在控制台中使用"</a> 来把该节点作为 <code>temp<var>N</var></code> 变量在 <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">命令行</a> 中使用。</li>
</ul>
<p>在<a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button"> 选择元素</a>时:</p>
<ul>
<li>按住 <kbd>Shift</kbd> 并点击元素来选择节点并保持选择模式 (拾取模式不会取消).</li>
<li>使用 <kbd>←</kbd>/<kbd>→</kbd> 键来选择它的父/子元素 (如果它们很难被选择).</li>
</ul>
<p>在 <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">规则视图</a>中:</p>
<ul>
<li>点击选择器后的查看按钮 (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">)来使所有匹配的元素高亮显示。</li>
<li>点击<code>element{}</code> 规则后的查看按钮(<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">)来锁定当前元素的高亮显示。</li>
<li>右击任意属性并选择 "Show MDN Docs" 来 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties">在MDN 文档中查看这个属性</a>。</li>
<li>点击被覆盖属性后的筛选按钮 (<img alt="" src="https://mdn.mozillademos.org/files/14187/filter.png" style="height: 19px; width: 18px;">)来 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">查找其他覆盖它的属性</a>。</li>
<li>右击属性的名称，值或者规则来复制该属性的名称，值，声明或者整个规则。</li>
</ul>
<h2 id="网页控制台">网页控制台</h2>
<p>在所有面板:</p>
<ul>
<li>按 <kbd>Esc</kbd> 键打开 <a href="/en-US/docs/Tools/Web_Console/Split_console">split console</a>; 用以调试页面以及审查节点。</li>
</ul>
<p><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">命令行</a>:</p>
<ul>
<li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#$0">$0</a></code> 指令代表当前选择的节点。</li>
<li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#$">$()</a></code> 是 {{domxref("document.querySelector()")}}的简写形式。</li>
<li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#$$">$$()</a></code> 是{{domxref("document.querySelectorAll()")}}的简写形式。</li>
<li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#copy">copy()</a></code> 复制所有属性作为文本。</li>
<li>右击节点并点击 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">"在控制台中使用"</a> 来把这个节点作为 <code><a href="/en-US/docs/Tools/Web_Console/Helpers#tempN">temp<em>N</em></a></code> 变量在命令行中使用.</li>
<li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#cd">cd()</a></code> 切换JavaScript执行域到该页面的一个不同的iframe子页面。</li>
<li><code><a href="/en-US/docs/Web/API/Console/table">console.table()</a></code> 将表格数据作为表格输出（此句翻译需要校对）.</li>
<li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#help">help()</a></code> 打开<a href="/zh-CN/docs/Tools/Web_Console/Helpers">Web控制台帮助</a>页面</li>
</ul>
<p>控制台输出:</p>
<ul>
<li>点击输出元素后面的查看按钮 (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) 来<a href="/en-US/docs/Tools/Web_Console/Rich_output#Highlighting_and_inspecting_DOM_nodes">在查看器中选中该元素</a> 。</li>
<li>点击勾选 <a href="/en-US/docs/Tools/Settings#Common_preferences">"持续日志"</a> 选项来使输出的信息在进入及离开网页后不被清除。</li>
<li>在设置面板点击勾选 <a href="/en-US/docs/Tools/Settings#Web_Console">"显示时间戳"</a> 选项来在输出信息前面显示时间戳。</li>
</ul>
<h2 id="调试">调试</h2>
<ul>
<li>点击黑箱按钮 (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">)来在调试中跳过JavaScript库。</li>
<li>按下<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>F</kbd> 组合键来在所有脚本搜索。</li>
<li>按下<kbd>Ctrl</kbd>+<kbd>D</kbd> 组合键来搜索函数的定义。</li>
<li>按下 <kbd>Ctrl</kbd>+<kbd>L</kbd> 组合键跳转到具体的行。</li>
</ul>
<h2 id="样式编辑器">样式编辑器</h2>
<ul>
<li>点击样式表前的黑箱按钮 (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">) 来切换可见度。</li>
<li>在 <a href="/en-US/docs/Tools/Responsive_Design_Mode">响应式设计模式</a>下点击 <a href="/en-US/docs/Tools/Style_Editor#The_media_sidebar">@media </a>规则来切换模式。</li>
<li>点击导入按钮 (<img alt="Button to import a style sheet from the file system" src="https://mdn.mozillademos.org/files/14193/Import%20button.png" style="height: 18px; width: 18px;">)来导出样式表或者点击创建按钮(<img alt="Button to create a new style sheet" src="https://mdn.mozillademos.org/files/14195/Create%20style%20sheet%20button.png" style="height: 18px; width: 18px;">)创建一个新的样式表。</li>
<li>点击设置按钮并勾选 <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">"显示原始来源"</a> 来显示css预处理文件.</li>
</ul>
<h2 id="网络">网络</h2>
<ul>
<li>点击启动性能分析按钮来 <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">比较初次缓存与没有缓存的页面加载</a> 。</li>
<li>选择一个请求并点击 <a href="/en-US/docs/Tools/Network_Monitor#Edit_and_Resend">"编辑与重发"</a>按钮来修改该请求的消息头并重新发送该请求。</li>
<li>点击勾选 <a href="/en-US/docs/Tools/Settings#Common_preferences">"持续日志"</a> 选项来使输出的信息在进入及离开网页后不被清除。</li>
<li>点击 <a href="/en-US/docs/Tools/Network_Monitor#Cause_column">"原因列表中的js图标 </a>来追踪这个请求的堆栈。</li>
<li>点击勾选 <a href="/en-US/docs/Tools/Settings#Advanced_settings">"禁用缓存"</a> 选项来在调试时禁止网页缓存。</li>
</ul>
<h2 id="存储">存储</h2>
<ul>
<li>右击列表头打开下拉菜单来显示或隐藏列。</li>
<li>右击任意条目，点击“删除名字”来删除该条目或点击“删除全部”来删除全部条目。</li>
<li>选择一个条目并在侧边栏中查看解析的值。</li>
</ul>
<h2 id="开发者工具条">开发者工具条</h2>
<ul>
<li>按下 <kbd>Shift</kbd> + <kbd>F2</kbd> 来打开 <a href="/en-US/docs/Tools/GCLI">Developer Toolbar (GCLI)</a>，使用命令来控制页面，开发者工具，浏览器以及其他。</li>
<li><code><a href="/en-US/docs/Tools/GCLI#Commands">help</a></code> 弹出所有可用的指令的清单。</li>
<li><code><a href="/en-US/docs/Tools/GCLI/Display_security_and_privacy_policies">security csp</a></code> 显示 <a href="/en-US/docs/Web/Security/CSP">Content Security Policy</a>（内容安全政策） 指定的安全特性 。</li>
<li><a href="/en-US/docs/Tools/GCLI#Commands"><code>pref show</code>, <code>pref set</code> and <code>pref reset</code></a> 显示，设置和重置浏览器偏好。</li>
<li><code><a href="/en-US/docs/Tools/GCLI#Commands">folder openprofile</a></code> 在文件管理器中显示当前的配置文件目录。</li>
<li><code><a href="/en-US/docs/Tools/GCLI#Commands">media emulate <var>media type</var></a></code> 模拟指定的媒体类型。</li>
</ul>
|
