path: root/files/zh-cn/learn/discover_browser_developer_tools/index.html

---
title: 什么是浏览器开发者工具？
slug: Learn/Discover_browser_developer_tools
tags:
  - 开发工具
  - 调试
translation_of: Learn/Common_questions/What_are_browser_developer_tools
---
<div class="summary">
<p>每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的HTML、CSS和JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。</p>
</div>

<div class="note">
<p>注意：在你运行下面的例子之前，打开我们在<a href="/zh-CN/docs/Learn/Getting_started_with_the_web">Web开发入门</a>系列文章中建立的<a href="http://mdn.github.io/beginner-html-site-scripted/">初学者示例网站</a>。你应该按照下面的步骤打开。</p>
</div>

<h2 id="如何在浏览器中打开开发者工具">如何在浏览器中打开开发者工具</h2>

<p>开发者工具内置在您的浏览器的子窗口之中，大概像这样：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9561/Screenshot%20from%202014-11-25%2012:32:57.png" style="display: block; height: 625px; margin: 0px auto; width: 775px;"></p>

<p><strong>如何打开它？有三种方式：</strong></p>

<ul>
 <li><em><strong>键盘快捷键</strong></em> <em>Ctrl + Shift + I ，</em>除了以下的特例

  <ul>
   <li><strong>Internet Explorer. </strong><em>F12 </em></li>
   <li><strong>Mac OS X. </strong><em><span class="Unicode">⌘ + ⌥ + I </span></em></li>
  </ul>
 </li>
 <li><span class="Unicode"><em><strong>菜单栏 </strong></em></span>
  <ul>
   <li><strong>Firefox</strong>：菜单 <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em>➤</em></span><em> Web 开发者 ➤ </em><span class="Unicode"><em><span class="Unicode">切换工具箱（译者注：此处修改为最新的 Firefox Quantum），或者工具栏中的 </span></em></span><span class="Unicode"><em><span class="Unicode"><img alt="" src="https://mdn.mozillademos.org/files/9639/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 40px; width: 45px;"></span></em><em><span class="Unicode">➤ 切换工具箱 </span></em></span></li>
   <li><strong>Chrome</strong>：菜单 <em>➤ 更多工具 ➤ 开发者工具</em></li>
   <li><strong>Safari</strong>：<em><span class="Unicode">Develop ➤</span> Show Web Inspector</em>。如果你看不到 <em>Develop </em>菜单，去到<em>Safari<span class="Unicode"> ➤</span> Preferences ➤ Advanced</em>，然后点击<em>Show Develop menu in menu bar</em> 复选框。</li>
   <li><strong>Opera</strong>. <em><span class="Unicode">Developer ➤</span> Web Inspector</em></li>
  </ul>
 </li>
 <li><strong>右键菜单</strong>：右键单击网页中的一个项目上（在Mac上按Ctrl点击），并从弹出的菜单中选择<code>检查元素</code>（译者注：选择<code>检查</code>（Chrome）或<code>查看元素</code>（Firefox））。（这种方法的好处是：该方法直接将你右击的元素的代码突出显示）。</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/9605/inspect-element-option.png" style="display: block; height: 264px; margin: 0px auto; width: 350px;"></p>

<p id="调试审查：DOM_Explorer和CSS编辑器">检查器（Inspector）：DOM 浏览器和CSS编辑器</p>

<p>开发者工具在打开时默认为检查器页面，如下图所示。这个工具可以让你看到你的网页的HTML运行时的样子，以及哪些CSS规则被应用到了页面上元素。它还允许您立即修改HTML和CSS并在浏览器中实时观察修改的结果。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9607/inspector.png" style="display: block; height: 727px; margin: 0px auto; width: 800px;"></p>

<p>如果你看不到调试器，</p>

<ul>
 <li>点击“检查”选项卡。</li>
 <li>在Internet Explorer中，点击DOM Explorer，或按Ctrl + 1。</li>
 <li>在Safari中，控制就不是很清楚了，但是你如果你没有选择的东西出现在窗口看到HTML。按下按钮查看CSS样式。</li>
</ul>

<h3 id="探索DOM检查器">探索DOM检查器</h3>

<p>首先在DOM检查器中右键单击（按Ctrl点击）一个HTML元素，看上下文菜单。菜单选项各不相同，但主要功能是相同的：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9609/dev-tool-context-menu.png" style="display: block; height: 236px; margin: 0px auto; width: 200px;"></p>

<ul>
 <li><strong>删除节点</strong>（或删除元素）：删除当前元素<strong>。</strong></li>
 <li><strong>编辑HTML</strong>（或添加属性/编辑文本）：让您更改HTML和看到在变化的结果。对于调试和测试非常有用。</li>
 <li><strong>:hover/:active/:focus</strong>（悬停/激活/聚焦）：强制切换元素状态以查看显示外观。</li>
 <li><strong>复制/复制为HTML</strong>：复制当前选定的HTML。</li>
 <li>一些浏览器也有复制CSS路径和复制XPath，允许你选择复制当前的HTML元素CSS选择器或XPath表达式。</li>
</ul>

<p>现在试着编辑一些你的DOM。双击元素，或在页面内容里右键单击它并选择编辑HTML。你可以做出任何你想要的改变，但你不能保存。</p>

<h3 id="探索CSS编辑器">探索CSS编辑器</h3>

<p>默认情况下，CSS编辑器显示当前<img alt="" src="https://mdn.mozillademos.org/files/9631/css-viewer-2.png" style="border: 1px solid black; display: block; height: 218px; margin: 0px auto; width: 326px;">所选元素应用的CSS规则：</p>

<p>这些功能特别有用：</p>

<ul>
 <li>应用于当前元素的规则以相关度排序。越特定的规则显示的越靠前。</li>
 <li>点击每个声明旁边的复选框，看看如果删除声明会发生什么。</li>
 <li>点击每个简写属性旁边的小箭头显示属性的普通等效项。</li>
 <li>单击属性名称或值以显示一个文本框，您可以在其中键入新值以获取样式更改的实时预览。</li>
 <li>每个规则旁边是规则定义的文件名和行号。单击该规则将使开发工具跳转到自己的视图中显示，通常可以编辑和保存。</li>
 <li>您还可以单击任何规则的关闭大括号，以在新行上显示一个文本框，您可以在其中为页面写入一个全新的声明。</li>
</ul>

<p>您会注意到CSS查看器顶部的一些可点击的选项卡：</p>

<ul>
 <li><em>计算：显示当前所选元素的计算样式（浏览器应用的最终归一化值）。</em></li>
 <li><em>盒子模型：这可以直观地表示当前元素的框模型，所以您可以一目了然地看到应用了什么填充，边框和边距，以及它的内容有多大。</em></li>
 <li>字体：在Firefox中，“字体”选项卡显示应用于当前元素的字体。</li>
</ul>

<h3 id="了解更多">了解更多</h3>

<p>了解更多Inspector在不同的浏览器中的细节：</p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Firefox Page inspector</a></li>
 <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx">IE DOM Explorer</a></li>
 <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">Chrome DOM inspector</a> (Opera的inspector 和它一样)</li>
 <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">Safari DOM inspector and style explorer</a></li>
</ul>

<h2 id="JavaScript调试器">JavaScript调试器</h2>

<p>你可在JavaScript调试器中查看变量的值，或者设置断点。断点的作用是让程序在你指定的位置暂停，以便你来调试程序并确定问题所在。</p>

<p><img src="https://mdn.mozillademos.org/files/16239/firefox_debugger.png"></p>

<p>如何打开调试器：</p>

<p>火狐，谷歌，IE，Edge：<kbd>F12</kbd></p>

<p>Safari：开打开发者工具，然后选择 "Debugger" 标签。</p>

<h3 id="尝一尝调试器的味">尝一尝调试器的味</h3>

<p>火狐的调试器有三个面板</p>

<h4 id="文件列表">文件列表</h4>

<p>第一个面板位于左边，它包涵着你正在调试的网页的文件列表。从列表中选中你要操作的文件。通过点击选中一个文件，可以在调试中间的面板看到它的内容。</p>

<p><img src="https://mdn.mozillademos.org/files/16240/File_List.png"></p>



<h4 id="源码">源码</h4>

<p>在你想要停止执行的位置设置间断点。在下面图片中，高亮的第18行就是被设置的断点。</p>

<p><img src="https://mdn.mozillademos.org/files/16241/Source_code.png"></p>

<h4 id="“监视表达示”和“断点”">“监视表达示”和“断点”</h4>

<p>右边的面板会显示你添加的监视表达示与断点。</p>

<p>在下图中，第一个区域，<strong>监视表达示</strong>，显示了变量 listItem 已经被添加，你可以展开列表查看里面的值。</p>

<p>接下来的部分，<strong>断点 标签</strong>，列出了页面上设置的断点。在 example.js（上上个图中）中，一个断点被定位在语句 <code>listItems.push(inputNewItem.value);</code> 上。</p>

<p>最后两个部分，只在代码运行时才出现。</p>

<p><strong>调用栈 </strong>区向你显示哪个代码执行后会达到当前行。你能看到代码处理了一次鼠标点击后，停在了断点处。</p>

<p>最后一部分，<strong>Scopes</strong>，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对像在addItemClick函数中是如何变化的。</p>



<p><img src="https://mdn.mozillademos.org/files/16242/watch_items.png"></p>

<h3 id="再了解一些">再了解一些</h3>

<p>了解不同浏览器中的JavaScript调试器：</p>

<ul>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger">Firefox JavaScript Debugger</a></li>
 <li><a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/debugger">Microsoft Edge Debugger</a></li>
 <li><a href="https://developers.google.com/web/tools/chrome-devtools/javascript/">Chrome Debugger</a></li>
 <li><a href="https://developer.apple.com/safari/tools/">Safari Debugger</a></li>
</ul>

<h2 id="JavaScript控制台">JavaScript控制台  </h2>

<p>JavaScript控制台是一个非常有用的工具，用于调试没有按预期运行的JavaScript。它允许您针对浏览器当前加载的页面运行JavaScript行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台，只需按控制台按钮。 （在Internet Explorer中，按Ctrl + 2.）这将给你一个如下所示的窗口:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9541/console.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 821px;"></p>

<p>要查看会发生什么，请尝试逐个输入以下代码片段（然后按Enter键）:</p>

<ol>
 <li>
  <pre class="brush: js notranslate">alert('hello!');</pre>
 </li>
 <li>
  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'purple';</pre>
 </li>
 <li>
  <pre class="brush: js notranslate">var my_image = document.createElement('img');

//下面的url已经不再可用，这里注释掉，后面补上了一个可以url
//且myImage在文章开始给的“初学者示例网址”存在声明冲突，所以改为my_image
//myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
my_image.setAttribute('src','https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif');

document.querySelector('h1').appendChild(my_image);</pre>
 </li>
</ol>

<p>现在尝试输入以下错误的代码版本，看看你得到什么。</p>

<ol>
 <li>
  <pre class="brush: js notranslate">alert('hello!);</pre>
 </li>
 <li>
  <pre class="brush: js notranslate">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre>
 </li>
 <li>
  <pre class="brush: js notranslate">var my_Image = document.createElement('img');
myBanana.setAttribute('src','https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif');
document.querySelector('h1').appendChild(my_Image);</pre>
 </li>
</ol>

<p>您将开始看到浏览器返回的错误类型。通常这些错误是相当神秘的，但是应该很简单的把这些问题解决出来！</p>

<h3 id="了解更多_2">了解更多</h3>

<p>了解更多JavaScript控制台在不同浏览器中的细节:</p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li>
 <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li>
 <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Opera与它相同)</li>
 <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li>
</ul>

<h2 id="参见"> 参见</h2>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li>
</ul>