什么是浏览器开发者工具？

如何在浏览器中打开开发者工具

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

如何打开它？有三种方式：

• 键盘快捷键 Ctrl + Shift + i ，除了以下的特例
  • Internet Explorer. F12
  • Mac OS X. ⌘ + ⌥ + I
• 菜单栏
  • Firefox. Menu  ➤ ➤ Toggle Tools, or Tools ➤ Web Developer ➤ Toggle Tools
  • Chrome. View ➤ Developer ➤ Developer Tools
  • Safari. Develop ➤ Show Web Inspector。如果你看不到 Develop 菜单，去到Safari ➤ Preferences ➤ Advanced，然后点击Show Develop menu in menu bar 复选框。
  • Opera. Developer ➤ Web Inspector
• 右键内容菜单   按住右键单击一个项目/网页上（在Mac上按Ctrl点击），并选择检查从出现的上下文菜单中的元素。（这种方法的好处是：该方法直接将你右击的元素的代码突出显示）。

调试审查：DOM Explorer和CSS编辑器

开发者工具通常用于调试审查，这看起来像下面的截图。这个工具可以让你看到你的网页的HTML看起来像在运行，以及什么是CSS应用到页面上的每个元素。它还允许您立即修改HTML和CSS并看到你变化的结果实时反映在浏览器窗口。

如果你无法看见调试器，

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

探索DOM检查器

一开始，请右键单击（按Ctrl点击）一个HTML元素在DOM查看器看上下文菜单。菜单选项各不相同，但重要的是相同的：

• 删除节点（有时删除元素）。删除当前元素。
• 编辑HTML（有时添加属性/编辑文本）。让您更改HTML和看到在变化的结果。非常有用的调试和测试。
• 悬停/：活动/焦点。聚焦的元素状态被切换，所以你可以看到他们的显示外观。
• 复制/复制为HTML。复制当前选定的HTML。
• 一些浏览器也有复制CSS路径和复制XPath，允许你复制CSS选择器或XPath表达式，选择当前的HTML元素。

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

探索CSS编辑器

默认情况下，CSS编辑器显示CSS当前所选元素应用的规则：

这些功能特别方便:

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

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

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

了解更多

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

• Firefox Page inspector
• IE DOM Explorer
• Chrome DOM inspector (Opera的inspector 和它一样)
• Safari DOM inspector and style explorer

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

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

1. alert('hello!');

2. document.querySelector('html').style.backgroundColor = 'purple';

3. var myImage = document.createElement('img');
   myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
   document.querySelector('h1').appendChild(myImage);

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

1. alert('hello!);

2. document.cheeseSelector('html').style.backgroundColor = 'purple';

3. var myImage = document.createElement('img');
   myBanana.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
   document.querySelector('h1').appendChild(myImage);

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

了解更多

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

• Firefox Web Console
• IE JavaScript console
• Chrome JavaScript Console (Opera与它相同)
• Safari Console