1 files changed, 136 insertions, 0 deletions
diff --git a/files/zh-cn/tools/tips/index.html b/files/zh-cn/tools/tips/index.html
new file mode 100644
index 0000000000..2f22e393ba
--- /dev/null
+++ b/files/zh-cn/tools/tips/index.html
@@ -0,0 +1,136 @@
+---
+title: 小技巧
+slug: Tools/Tips
+tags:
+  - 开发工具
+  - 网络开发
+translation_of: Tools/Tips
+original_slug: Tools/小技巧
+---
+<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>