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

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

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

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

• 键盘快捷键 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当前所选元素应用的规则：

These features are especially handy:

• The rules applied to the current element are shown in order of most-to-least-specific.
• Click the checkboxes next to each declaration to see what would happen if you removed the declaration.
• Click the little arrow next to each shorthand property to show the property's longhand equivalents.
• Click a property name or value to bring up a text box, where you can key in a new value to get a live preview of a style change.
• Next to each rule is the file name and line number the rule is defined in. Clicking that rule causes the dev tools to jump to show it in its own view, where it can generally be edited and saved.
• You can also click the closing curly brace of any rule to bring up a text box on a new line, where you can write a completely new declaration for your page.

You'll notice a number of clickable tabs at the top of the CSS Viewer:

• Computed: This shows the computed styles for the currently selected element (the final, normalized values that the browser applies).
• Box model: This represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is.
• Fonts: In Firefox, the Fonts tab shows the fonts applied to the current element.

Find out more

Find more out about the Inspector in different browsers:

• Firefox Page inspector
• IE DOM Explorer
• Chrome DOM inspector (Opera's inspector works the same as this)
• Safari DOM inspector and style explorer

JavaScript控制台

The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser, just press the Console button. (In Internet Explorer, press Ctrl + 2.) This will give you a window like the following:

To see what happens, try entering the following snippets of code into the console one by one (and then pressing 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);

Now try entering the following incorrect versions of the code and see what you get.

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);

You'll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!

Find out more

Find more out about the JavaScript console in different browsers:

• Firefox Web Console
• IE JavaScript console
• Chrome JavaScript Console (Opera's inspector works the same as this)
• Safari Console