(Google Chrome)由于其高级功能，Google Chrome是用于 Web 开发的流行 Web 浏览器之一。Chrome 开发者工具(Chrome Developer Tools)在调试时非常有用。我们大多数人已经知道我们可以使用Chrome 开发工具编辑实时(Chrome Dev Tools)CSS，但是今天我们将与您分享更多技巧。
Chrome 开发工具提示
Chrome 开发工具(Chrome Dev Tools)有许多未知和隐藏的技巧，我们将研究其中最有用的技巧。要在Chrome(Chrome)中打开开发人员工具，请按键盘上的F12并尝试以下技巧。
1.查找并打开任何文件
当我们进行 Web 开发时，我们会处理许多HTML、CSS、JS 和其他文件。当我们想要调试任何东西时，我们会打开Chrome 开发(Chrome Dev)工具。您可以快速搜索并找到特定文件，使您的工作更轻松。只需(Just)，按Ctrl + P 并开始输入文件名。这可以帮助您从文件列表中找到特定文件。
2.在源文件中搜索
在上一个技巧中，我们开始知道如何搜索特定文件。您甚至可以在所有加载的文件中搜索特定字符串。按Ctrl + Shift + F 在文件中搜索字符串。它还支持正则表达式。
3. 转到特定行
一旦您打开任何源文件并想要移动到特定行，然后按Ctrl + G 并给出行号并按 Enter。
4. 在控制台(Console)选项卡中选择 DOM 元素
开发工具(Dev Tools)还允许您在控制台中选择元素。
- $() – 返回(Returns)匹配的CSS选择器的第一次出现。
- $$() – CSS选择器的元素数组。
有关更多控制台命令，请参阅这篇文章。(this post.)
5. 使用多个插入符号
有时，您想在不同的位置设置多个插入符号，您可以在Chrome 开发(Chrome Dev)工具中轻松地做到这一点，方法是按住Ctrl键并单击要放置它们的位置。然后开始写作，你会看到它被放置在选择的各个地方。
6. 保留日志
保留(Preserve)日志可帮助您在加载页面时保留日志。选中控制台(Console)日志中保留日志(Preserve log )旁边的选项，日志将被保留。这会在卸载页面之前显示日志，有助于调查错误。
7.使用内置代码美化器
Chrome 开发工具(Chrome Dev Tools)有内置的代码美化器，称为漂亮打印“{}”(pretty print “{}”)。开发者工具显示了最小化的代码，不是那么容易阅读。单击(Click)打开的源文件左下方显示的漂亮打印按钮，以人类可读的格式显示源文件。
8. 您的网站是否适合移动设备？在这里检查
Chrome 开发工具(Chrome Dev Tools)还允许我们检查网站是否适合移动设备。您可以检查您的网站在各种设备上的外观。转到Chrome 开发(Chrome Dev)工具，在Emulation选项卡下，您可以归档各种设备。选择您想要的设备并测试您的网站在该设备上的外观。
有关更多信息，请观看以下视频。
9. 模拟传感器和地理位置(Geographical Location)
您甚至可以模拟触摸屏和加速度计等传感器。您甚至可以模拟地理位置。为此，请转到Emulation -> Sensors.
10.选择当前单词的下一个出现
如果要替换该单词的所有出现，则选择该单词并按Ctrl + D 以选择所选单词的下一个出现。然后，您可以一次性编辑所有出现的单词。
11.改变颜色格式
只需使用Shift + Click 颜色预览即可更改 rgba、十六进制和 hsl 格式。
12.通过工作区添加(Add)对本地文件的更改
我们能够编辑源文件并在Chrome 开发(Chrome Dev)工具中对CSS、JavaScript和其他文件进行一些更改。要将这些更改添加到本地文件，则无需将更改从工作区复制粘贴到磁盘上的文件。Chrome 开发(Chrome Dev)工具允许您匹配文件并使用您在开发工具中所做的更改更新本地文件。要完成此操作，请右键单击Sources(Sources )选项卡左侧的源文件，然后选择Add Folder to workspace。
希望这可以帮助。
Chrome Development Tools Tutorials, Tips, Tricks
Google Chrome is one of the popυlar wеb browsers for web development, due to its advanced feаtures. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.
Chrome Development Tools tips
There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.
1. Find and Open any file
When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.
2. Search within the source file
In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.
3. Go to a particular line
Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.
4. Selecting DOM Elements in the Console tab
Dev Tools also allows you to select elements in the console.
- $() – Returns the first occurrence of the matching CSS selector.
- $$() – It returns the array of elements matching the given CSS selector.
For more console commands, head over to this post.
5. Make use of multiple carets
Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.
6. Preserve Log
Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.
7. Use built-in code beautifier
Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.
8. Is your website mobile friendly? Check it here
Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.
For more information, have a look at the following video.
9. Emulate Sensors and Geographical Location
You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.
10. Select the next occurrence of the current word
If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.
11. Alter Color Format
Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.
12. Add changes to local files through the workspace
We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.
Hope this helps.
