MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Learn web development

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

这篇翻译不完整。请帮忙从英语翻译这篇文章

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

提示:在你运行下面的例子之前,打开初学者的示例网站,我们建立开始与网络文章系列。你应该按照下面的步骤打开。

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

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

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

  • 键盘快捷键 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在不同的浏览器中的细节:

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

文档标签和贡献者

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