每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的HTML、CSS和JavaScript,显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。

注意:在你运行下面的例子之前,打开我们在Web开发入门系列文章中建立的初学者示例网站。你应该按照下面的步骤打开。

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

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

如何打开它?有三种方式:

  • 键盘快捷键 Ctrl + Shift + I ,除了以下的特例
    • Internet Explorer. F12
    • Mac OS X. ⌘ + ⌥ + I
  • 菜单栏
    • Firefox:菜单   Web 开发者 ➤ 切换工具箱(译者注:此处修改为最新的 Firefox Quantum),或者工具栏中的 ➤ 切换工具箱 
    • Chrome:菜单 ➤ 更多工具 ➤ 开发者工具
    • SafariDevelop ➤ Show Web Inspector。如果你看不到 Develop 菜单,去到Safari Preferences ➤ Advanced,然后点击Show Develop menu in menu bar 复选框。
    • Opera. Developer ➤ Web Inspector
  • 右键菜单:右键单击网页中的一个项目上(在Mac上按Ctrl点击),并从弹出的菜单中选择检查元素(译者注:选择检查(Chrome)或查看元素(Firefox))。(这种方法的好处是:该方法直接将你右击的元素的代码突出显示)。

检查器(Inspector):DOM 浏览器和CSS编辑器

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

如果你看不到调试器,

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

探索DOM检查器

首先在DOM检查器中右键单击(按Ctrl点击)一个HTML元素,看上下文菜单。菜单选项各不相同,但主要功能是相同的:

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

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

探索CSS编辑器

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

这些功能特别有用:

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

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

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

了解更多

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

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控制台在不同浏览器中的细节:

 参见

 

 

文档标签和贡献者

标签: 
此页面的贡献者: eelord, ziyouwa, Atractylodes, wth, ziyunfei, zhaoy875
最后编辑者: eelord,