5（更多）对开发人员有用的Chrome DevTools技巧

Google Chrome浏览器随附了一组便捷的Web开发工具，以DevTools （Chrome开发者工具）的形式提供。 在上一篇文章中 ，我们向您展示了一些使用DevTools的基本技巧，例如更改User Agent字符串 ，CSS编辑，更改颜色格式以及移动DOM 。

随着Google不断向DevTools添加新功能，我们决定在DevTools中展示另外5个功能，这些功能可以帮助您更有效地开发网站。

1.整理JavaScript

压缩JavaScript是减少文件大小和改善网站加载时间的好方法。 但是，缩小的代码很难读取和调试。 如果遇到此问题，可以使用DevTools中的PrettyPrint功能“缩小” JavaScript。

转到DevTools中的Sources面板，您将在左下角找到一个图标数组（屏幕截图）。

选择缩小JavaScript源，然后单击图标数组中的大括号图标 {} （截图）。

从上面的屏幕截图中可以看到，JavaScript现在变得更整洁并且更具可读性。

2.片段

通过利用常用的代码，代码片段可以节省大量时间，并显着加快调试过程。

首先，转到“ 源” >“ 代码段” （子面板）。 然后，右键单击并选择“ 新建”以创建一个新的代码段，键入您经常使用的代码并保存。

要插入摘要，只需打开您的源代码之一-它可以是HTML，CSS或JS。 然后，将代码段拖放到源代码中（屏幕截图）。

3.覆盖地理位置

在上一教程中，我们向您展示了如何使用HTML5 Geolocation检索用户位置。 在开发包含HTML5地理位置的网站或应用程序时，您可能希望显示除​​您自己的位置之外的其他位置。 使用DevTools，您可以轻松地做到这一点。

首先，您需要使用此工具找出所需位置的经度和纬度坐标。

1. 然后，转到设置 > 覆盖 。
2. 选中/勾选“ 覆盖地理位置”选项。
3. 输入经度和纬度坐标。

现在，刷新页面，您应该根据输入的坐标（屏幕截图）看到位置。

4.绩效审计

如果访问者或客户的加载速度非常缓慢，则很可能会离开您的网站。 要使用Google Chrome浏览器衡量网站的性能 ，可以转到DevTools中的“ 审核”面板，然后点击“ 运行”按钮（屏幕截图）。

它将生成一个报告，向您显示应该优化网站的哪些部分（屏幕快照）。

5.复制文本文档

使用DevTools，您还可以从网页复制内容。 当您需要一些实际内容来测试您的网站而不是传统的Lorem Ipsum时，这可能会很有用。 为此，只需转到“ 控制台”面板并运行以下命令。

copy(document.getElementById('content').innerText)

该命令假定内容嵌套在具有content ID的元素下。 根据网页的不同，ID可能会有所不同。 因此，在运行该命令copy() ，您需要确定要嵌套内容（要复制的位置）的位置。

运行此命令后，内容将立即保存到剪贴板，因此您只需将其粘贴到文档中即可。

与往常一样，我们希望您发现这些技巧有用。 如果您还有任何其他好的技巧，我们在这篇文章中错过了什么，请随时在下面的评论中告诉我们。

翻译自: https://www.hongkiat.com/blog/chrome-web-developers-tips/