拥有一套方便的工具来帮助测试您的网站对于开发人员来说是必不可少的。最好的地方放在哪里？当然是在你的浏览器里！谷歌流行的浏览器Chrome内置了开发者工具。这是一组用于网页创作和调试的工具。这，这个，那，那个Chrome开发工具(被称为DevTools)允许开发人员访问Web浏览器和Web应用程序的内部工作。

使用ChromeDevTools，您可以知道所使用的样式、图像大小、所使用的脚本等。您可以调试并知道页面上存在哪些错误。你甚至可以切换样式或关闭，或完全改变它们，看看它对你的网站有什么影响。

在你的浏览器里

工具本身很容易得到。这里有三种打开它们的方法：

1. 在Chrome浏览器中-选择Chrome菜单(右上角的三个水平条)，选择更多工具，然后选择DeveloperTools。

2. 右键单击任何页面上的元素并选择“检查元素”。

3. 在Windows键盘上选择ctrl+Shift+i。在Mac上选择CMND+OPT+I。

其中任何一个都会打开浏览器底部的DevTools窗口。

主窗口

这些工具出现在屏幕的底部。您将看到一个主窗口，顶部有菜单，默认视图是元素，而默认选择则是带有菜单和样式的辅助窗口。

这些工具被分组为任务。有8个组，包括元素、网络、源、时间线、概要、资源、审核和控制台。

元素

在这里，您可以看到页面的HTML结构。HTML和Body的底部有一个切换键。您可以在任何元素上鼠标查看每个元素的详细信息。

您可以单击箭头来打开和关闭主元素的内容，以使它们更易于阅读。因此，您可以关闭正文，只需读取标题，选择要查看的标题中的元素，等等。这是一个极好的工具，查看您的网站的HTML。

网络

这显示了将要加载的每个元素，它们是如何加载的，文件的类型，文件的大小，加载所需的时间，以及在页面加载序列中何时加载的时间线。这可以用于解决网络问题，例如页面加载中的瓶颈和糟糕的请求。

例如，如果您看到了大量404错误，您可以更仔细地查看问题所在。也许你已经下载了一个页面，它的流量仍然很大，或者有人输入了错误的链接。

来源

这显示了将要加载的脚本和代码片段以及它们的来源。

时间线

这显示了每个资源加载的时间。您可以看到什么花费最多的时间，这有助于减少您的页面加载。

剖面图

这显示了每个元素的内存使用情况。这对于向您展示哪些代码需要优化是很好的。

资源

在这里，您可以检查加载的资源。您可以查看cookie、应用程序缓存、HTML 5数据库等。

审计

这允许您分析页面。您可以在加载或加载之后进行审计。

审计现状

首先，我选择运行审计现状。这将在站点当前的位置运行审核，该站点已经加载到我的浏览器中。

它给了我一张物品清单，根据它们的重要性给它们加上颜色，并显示问题的数量。我可以通过点击它们看到更多的细节。

我已经扩展了其中的几个，以查看关于每一个的详细信息。它给了我关于网络使用和网页性能的信息。它为我提供了如何解决这些问题的建议，并为我确定了它们的轻重缓急。

重装页面与负载审核

我回去了，选择了在载货时进行审计。结果相似，但正如预期的那样，在加载页面时会出现比加载页面更多的问题。

在这两者之间，我得到了关于JavaScript、浏览器缓存、代理缓存、cookie大小、从无炊事域提供内容、图像尺寸、脚本的顺序和样式、将CSS放置在文档头部、删除未使用的CSS riles以及使用普通CSS属性名称的信息。当然，结果会因网站而异。

这些信息不如速度洞察，但这足以让我开始，我喜欢它被内置到我正在使用的工具的方便。我建议您每次更改站点时都运行它。它太容易使用，不能不使用它。

控制台

这是JavaScript控制台，您可以在这里测试页面和应用程序。您可以调试脚本，并获得有关要进行哪些更改的建议。控制台允许您输入命令，以便可以与网页进行交互。它将记录诊断信息以帮助您进行调试。您可以在主屏幕或抽屉(主屏幕下的窗口)使用它。

您可以使用控制台或命令行API的。您可以写入控制台，格式化元素和样式输出，测量执行或加载时间，查看和标记时间线，计数语句，设置断点，计算表达式，监视事件，堆栈消息，查看错误和警告，等等。

这是一个强大的工具，但使用它有很多。幸运的是，很好参比物质提供了有关如何使用它的示例。

调试

在Windows中选择ctrl+p或在Mac上选择cmd+p将打开调试屏幕，在那里可以选择要调试的脚本。该工具为您提供了您希望在任何编程环境中看到的调试功能：暂停、继续、逐步进入、跨步、断点、格式化代码等等。

细部帮助文件提供这些信息，以逐步使用调试模式。

CSS样式窗口

最右边的框包含所有CSS信息。当您选择一个元素时，右侧的“样式”窗口将显示元素的样式信息。这部分很有趣。有五组工具：样式、计算、事件侦听器、DOM断点和属性。

风格

您可以选择样式并在此窗口中手动更改它们。例如，您可以选择字体大小和颜色。

选择字体大小并输入您自己的大小。这样做时，所选字体的字体大小将在屏幕上更改。

在字体颜色上进行选择将打开颜色选择器。选择您想要的颜色，然后按回车。您将看到所选字体更改为新颜色。这是一个很好的方法来尝试新的字体样式，大小和颜色。

如果您单击右侧的site.css，您将打开一个包含详细信息的较大窗口。在这里，您可以键入要使用的字体的名称、指定颜色、指定大小等。

计算值

这显示了框大小(以像素为单位)。它有填充、边框和边距。

设备模式

在放大镜和看起来像移动设备的元素菜单之间左边有一个小按钮。你猜怎么着？这是一种移动设备。这是设备仿真模式。这是一个很好的方式，看看你的网站是如何反应。

装置

比仅仅是移动设备更酷的是，你可以选择它是哪一种移动设备，然后你就可以看到这个网站，就好像你在那个设备上看它一样。太棒了！

我选择了亚马逊KindleFire HDX 7“，屏幕模仿了这个设备，这样我就可以看到这个站点在屏幕上的样子和触摸的工作方式。

您可以通过点击交换维度按钮来改变屏幕的方向。

这是一个很好的方式来看看你的WordPress网站是什么样子在较小的移动屏幕。我选择了iPhone 6，屏幕大小与新的屏幕大小和分辨率相匹配。有许多设备可查看。还可以通过拖动两侧以增加或缩小大小来查看自定义大小。

网络

也有一个选择来选择您要访问该站点的网络类型。这使您可以通过各种连接类型和速度查看您的网站的性能。您可以测试从50 Kbps GPRS到30 Mbps WiFi的几个速度，以及几个2G、3G和4G连接速度。这是一个很好的方式来测试你的网站的速度通过各种网络，并获得什么改进的洞察力。

媒体查询

左上角有一个小按钮，看起来像楼梯。它在网站窗口上方打开另一段屏幕，显示不同的像素宽度。点击它们，移动屏幕就可以达到这个大小。他们给你看：

• 针对最大宽度的查询

• 范围内的宽度

• 针对最小宽度的查询

这有助于您调整样式和媒体内容，以便进行完全响应的设计。

抽屉

主屏幕下还有一个叫做抽屉的工具。这一补充如下：

控制台-这是与主窗口相同的控制台。通过将它放在这里，您可以将它与主窗口中的任何工具一起使用。

搜索-允许您搜索来源。

仿真-您可以选择设备(在这里您可以选择型号、分辨率、网络等)、媒体、网络(吞吐量和用户代理)和传感器(触摸屏、加速度计等)。

渲染-显示油漆矩形、复合图层边框、FPS表、连续页面重绘和潜在的滚动瓶颈。

设置及更多

右边的菜单栏会告诉你网站上的错误和警告的数量，允许你隐藏底部的抽屉，让你调整设置，并将工具停靠到主窗口(在你的网站和DevTools之间创建一个分割屏幕)。

有大量的设置，您可以调整，以便您可以修改工具的工作方式，您需要他们。

铬金丝雀

如果你真的想站在谷歌ChromeDevTools的边缘，那就试试ChromeCanary吧。它的图标是黄色的。明白了吗？它需要一件斗篷。这是谷歌最新的，也是最棒的。它是为开发人员设计的，并有最新版本的DevTools。它还不够稳定，不适合一般使用，所以它可能会破坏您的系统。

如果当你的系统崩溃时，你很容易对你的环境造成严重的破坏，那么看看上面图片中的ChromeCanary图标，不要眨眼5秒。

现在你可以继续下去了。你不会记得这部分的。

包起来

GoogleChrome的开发工具是一个很好的工具，用于故障排除、提高网络性能、查看不同屏幕大小和分辨率的站点，以及获取站点需要改进的信息。有很多特性，您可以通过以下方式添加更多功能扩展。这些工具本身就是安装GoogleChrome的一个很好的理由，即使它不是您的主要浏览器。花点时间学习这些功能会有回报的，你的网站和访问者会为此感谢你。

轮到你了！你使用Chrome开发工具吗？我有没有遗漏你最喜欢的功能？你有什么要补充的吗？我想在下面的评论中听到这一点！