Chrome开发工具教程，提示和技巧

由于Chrome浏览器的高级功能，它是用于Web开发的流行Web浏览器之一。 Chrome Developer Tools 在调试时非常有用。我们大多数人已经知道我们可以使用Chrome开发工具编辑实时CSS，但是我们今天将与您分享更多提示。

Chrome开发工具提示

Chrome Dev有许多未知和隐藏的技巧工具，我们将寻找其中最有用的技巧。要在Chrome中打开开发人员工具，请在键盘上按 F12 ，然后尝试以下技巧。

1。查找并打开任何文件

当我们在进行Web开发时，我们处理许多HTML，CSS，JS和其他文件。当我们想调试任何东西时，我们打开Chrome开发工具。您可以快速搜索并查找特定文件，以使您的工作更轻松。只需按 Ctrl + P 并开始输入文件名。这有助于您从文件列表中找到特定文件。

2。在源文件中搜索

在之前的技巧中，我们开始了解如何搜索特定的文件。您甚至可以在所有加载的文件中搜索特定的字符串。按 Ctrl + Shift + F 在文件中搜索字符串。它也支持正则表达式。

3。转到特定行

打开任何源文件并想要移动到特定行后，按 Ctrl + G 并输入行号并按回车键

。在控制台选项卡中选择DOM元素

开发工具还允许您在控制台中选择元素。

• $（） - 返回匹配CSS选择器的第一个匹配项。 >它返回匹配给定CSS选择器的元素数组。
• 有关更多控制台命令，请转到此文章。使用多个插入符 有时，您想要在不同的地方设置多个插入符，您可以通过按住

Ctrl

键并单击要放置它们的位置，在Chrome开发工具中轻松完成。然后开始写作，你会发现它被放置在不同的地方。

6。保留日志 保留日志可帮助您保存日志，甚至可以加载页面。检查控制台日志中的 保留日志

旁边的选项，并保存日志。这会显示卸载页面前的日志，并有助于调查错误。

7。使用内置的代码美化工具 Chrome开发工具具有内置的代码美化工具，称为 美丽的打印“{}”。

开发工具显示最小化的代码，不容易阅读。点击打开的源文件左下角显示的漂亮打印按钮，以可读格式显示源文件。

8。你的网站移动友好？在这里检查 Chrome开发工具还可以让我们检查一个网站是否适合移动。您可以检查您的网站在各种设备上的显示效果。转到Chrome开发工具并在 仿真

选项卡下，您可以归档各种设备。选择您想要的设备并测试您的网站在该设备中的外观。

有关更多信息，请查看以下视频。 9。仿真传感器和地理位置 您甚至可以仿真触摸屏和加速度计等传感器。你甚至可以模仿地理位置。为此，请转至

仿真 - >传感器。

10。选择当前单词的下一个出现

如果要替换单词In the occurrence of occurrence，然后选择单词并按 Ctrl + D

选择下一个出现的单词。你可以在一次出现的所有事件中编辑该单词。

11。更改颜色格式 只需在颜色预览中使用 Shift +单击

更改rgba，十六进制和hsl格式之间的更改

。通过工作区 添加对本地文件的更改我们可以编辑源文件并对CSS，Java Script和Chrome Dev工具中的其他文件进行一些更改。要将这些更改添加到本地文件，则无需将工作区中的更改粘贴到磁盘上的文件。通过Chrome开发工具，您可以匹配文件并使用您在开发工具中所做的更改来更新本地文件。要完成此操作，请右键单击 Sources

选项卡左侧的源文件，然后选择

将文件夹添加到工作区。 有关工作区的更多信息，请转到Chrome.com。