每一个现代网络浏览器都包含一套强大的开发工具套件。这些工具可以检查当前加载的HTML、CSS和JavaScript，显示每个资源页面的请求以及载入所花费的时间。本文阐述了如何利用浏览器的开发工具的基本功能。
开发者工具内置在您的浏览器的子窗口之中，大概像这样：
如何打开它？有三种方式：
➤ Web 开发者 ➤ 切换工具箱（译者注：此处修改为最新的 Firefox Quantum），或者工具栏中的 
➤ 切换工具箱 检查元素（译者注：选择检查（Chrome）或查看元素（Firefox））。（这种方法的好处是：该方法直接将你右击的元素的代码突出显示）。
检查器（Inspector）：DOM 浏览器和CSS编辑器
开发者工具在打开时默认为检查器页面，如下图所示。这个工具可以让你看到你的网页的HTML运行时的样子，以及哪些CSS规则被应用到了页面上元素。它还允许您立即修改HTML和CSS并在浏览器中实时观察修改的结果。
如果你看不到调试器，
首先在DOM检查器中右键单击（按Ctrl点击）一个HTML元素，看上下文菜单。菜单选项各不相同，但主要功能是相同的：
现在试着编辑一些你的DOM。双击元素，或在页面内容里右键单击它并选择编辑HTML。你可以做出任何你想要的改变，但你不能保存。
默认情况下，CSS编辑器显示当前
所选元素应用的CSS规则：
这些功能特别有用：
您会注意到CSS查看器顶部的一些可点击的选项卡：
了解更多Inspector在不同的浏览器中的细节：
你可在JavaScript调试器中查看变量的值，或者设置断点。断点的作用是让程序在你指定的位置暂停，以便你来调试程序并确定问题所在。
如何打开调试器：
火狐，谷歌，IE，Edge：F12
Safari：开打开发者工具，然后选择 "Debugger" 标签。
火狐的调试器有三个面板
第一个面板位于左边，它包涵着你正在调试的网页的文件列表。从列表中选中你要操作的文件。通过点击选中一个文件，可以在调试中间的面板看到它的内容。
在你想要停止执行的位置设置间断点。在下面图片中，高亮的第18行就是被设置的断点。
右边的面板会显示你添加的监视表达示与断点。
在下图中，第一个区域，监视表达示，显示了变量 listItem 已经被添加，你可以展开列表查看里面的值。
接下来的部分，断点 标签，列出了页面上设置的断点。在 example.js（上上个图中）中，一个断点被定位在语句 listItems.push(inputNewItem.value); 上。
最后两个部分，只在代码运行时才出现。
调用栈 区向你显示哪个代码执行后会达到当前行。你能看到代码处理了一次鼠标点击后，停在了断点处。
最后一部分，Scopes，显示了在代码执行过程中，可见变量值的变化。例如，在下面图片中，你可以看到对像在addItemClick函数中是如何变化的。
了解不同浏览器中的JavaScript调试器：
JavaScript控制台是一个非常有用的工具，用于调试没有按预期运行的JavaScript。它允许您针对浏览器当前加载的页面运行JavaScript行，并报告浏览器尝试执行代码时遇到的错误。要在任何浏览器中访问控制台，只需按控制台按钮。 （在Internet Explorer中，按Ctrl + 2.）这将给你一个如下所示的窗口:
要查看会发生什么，请尝试逐个输入以下代码片段（然后按Enter键）:
alert('hello!');
document.querySelector('html').style.backgroundColor = 'purple';
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);
现在尝试输入以下错误的代码版本，看看你得到什么。
alert('hello!);
document.cheeseSelector('html').style.backgroundColor = 'purple';
var my_Image = document.createElement('img');
myBanana.setAttribute('src','https://media.giphy.com/media/3o6ozhxFlr4Ung40RG/giphy.gif');
document.querySelector('h1').appendChild(my_Image);
您将开始看到浏览器返回的错误类型。通常这些错误是相当神秘的，但是应该很简单的把这些问题解决出来！
了解更多JavaScript控制台在不同浏览器中的细节: