chrome 开发工具_使用Chrome开发工具提高生产力的10个技巧

chrome 开发工具

If you are a web developer, I’m pretty sure you are already familiar with Chrome Dev Tools. It has a massive list of features to support web development. But most of us use the bare minimum, just to get the work done.

如果您是网络开发人员，我敢肯定您已经熟悉Chrome开发工具。 它具有支持Web开发的大量功能。 但是我们大多数人只使用最低限度，只是为了完成工作。

In this post, I’m presenting ten tips on Chrome Dev Tools, that will help to boost your productivity and take you to the next level.

在这篇文章中，我将介绍有关Chrome Dev Tools的十个技巧，这些技巧将有助于您提高工作效率并将您带入一个新的高度。

1.命令菜单 (1. Command Menu)

One of the features I love about my editor (VS Code) is the Command Pallet feature. It gives developers the ability to execute a lot of commands right from the keyboard. All you have to press ctrl + shift+p and you have hundreds of commands available. This feature is being implemented in multiple applications, and now it is available in Chrome Dev Tools as well.

我喜欢我的编辑器(VS代码)的功能之一是Command Pallet功能。 它使开发人员能够直接从键盘执行许多命令。 您只需要按ctrl + shift + p ，就有数百种命令可用。 此功能已在多个应用程序中实现，现在Chrome开发工具中也可以使用。

Let’s imagine you wanted to take a screenshot of an HTML node on your web page. All you have to do is;

假设您想对网页上HTML节点进行截图。 您所要做的就是；

1. Open Chrome Dev Tools.
   开启Chrome开发人员工具。
2. Select the node you want to extract.
   选择要提取的节点。

3. Press ctrl + shift+p and type Screenshot .

   按ctrl + shift + p并键入Screenshot 。

There are multiple options to take a screenshot, and you can proceed with any of them.

有多个选项可以截取屏幕截图，您可以继续其中的任何一个。

Taking a screenshot of a selected node using Command Menu 使用命令菜单拍摄选定节点的屏幕截图

Tip: Share your reusable components between projects using Bit (Github). Bit makes it simple to share, document, and organize independent components from any project.

提示：使用Bit ( Github )在项目之间共享可重用组件 。 Bit使共享，记录和组织来自任何项目的独立组件变得简单。

Use it to maximize code reuse, collaborate on independent components, and build apps that scale.

使用它可以最大程度地重复使用代码，在独立组件上进行协作以及构建可扩展的应用程序。

Bit supports Node, TypeScript, React, Vue, Angular, and more.

Bit支持Node，TypeScript，React，Vue，Angular等。

Example: browsing through React components shared on Bit ( Github) 示例：浏览在 Bit ( Github )上共享的React组件

2.控制台可以做很多事情。 (2. The Console can do a lot of things.)

When debugging web applications, I tend to use Console logs to check the application behavior. However, if you do extensive logging to the Console, it makes it difficult to narrow down the log messages efficiently. Let’s explore the options available that help to distinguish each message.

调试Web应用程序时，我倾向于使用控制台日志来检查应用程序的行为。 但是，如果将大量日志记录到控制台，则很难有效地缩小日志消息的范围。 让我们探索有助于区分每条消息的可用选项。

信息，警告和错误日志级别。 (Info, Warn, and Error log levels.)

In applications, we have different levels of log messages. Errors, Warnings, and Info are the most common. You already have this support in Chrome Dev Tools using console.info console.warn and console.error methods. Let's see them in action.

在应用程序中，我们有不同级别的日志消息。 错误，警告和信息是最常见的。 您已经在Chrome开发工具中使用console.info console.warn和console.error方法提供了此支持。 让我们看看它们的作用。

Different log levels 不同的日志级别

将数组打印为表格。 (Printing an array as a table.)

Imagine you have an array of objects, and you want to see all the items and attributes. You can easily use the plain console.log. However, it will just give us a textual output. You can also use the method, console.tableto print information in a tabular format that makes it more human-readable.

假设您有一个对象数组，并且想要查看所有项目和属性。 您可以轻松使用普通的console.log 。 但是，它只会给我们文本输出。 您也可以使用console.table方法以表格格式打印信息，以使其更易于阅读。

console.table in action 使用console.table

在日志输出中添加样式 (Adding styling to the log output)

You can add CSS styles to the log output to highlight any log items.

您可以将CSS样式添加到日志输出中以突出显示任何日志项。

Styled console log message 样式化的控制台日志消息

分组日志消息 (Grouping log messages)

If you have a number of logs, debugging/log analyzing time would drastically reduce if you can group log messages. Console offer three methods, console.group, console.groupCollapsed and console.groupEnd for this.

如果您有许多日志，则可以对日志消息进行分组，这将大大减少调试/日志分析时间。 控制台为此提供了三种方法， console.group ， console.groupCollapsed和console.groupEnd 。

Log groups 日志组

测量操作之间的时间差。 (Measure the time difference between operations.)

While there are other ways of measuring JavaScript execution time, you can also use console.time and console.timeEnd to easily measure it.

尽管还有其他测量JavaScript执行时间的方法，但是您也可以使用console.time和console.timeEnd来轻松测量它。

Measure the time using console.time 使用console.time测量时间

3.将请求复制为访存/ cURL / NodeJS访存 (3. Copy request as a fetch/cURL/ NodeJS fetch)

When we invoke APIs from the frontend, if the intended result is not there, we typically use Postman or cURL for further investigation. Rather than manually entering the URL, headers, and parameters into these tools, you can copy the request as a fetch call, cURL, or as a NodeJS fetch call, by opening the Network tab in Chrome Dev Tools.

当我们从前端调用API时，如果没有达到预期的结果，则通常使用Postman或cURL进行进一步调查。 通过在Chrome开发工具中打开“网络”标签，您可以将请求复制为提取调用，cURL或NodeJS提取调用，而无需手动在这些工具中输入URL，标题和参数。

Copying request as a cURL request 将请求复制为cURL请求

4.引用当前选择的标签 (4. Reference to the currently selected tag)

If you want to perform some actions on an HTML node, you can simply get a reference to it. In Chrome Dev Tools $0 in the Console will always refer to the currently selected node.

如果要在HTML节点上执行某些操作，则只需获取对其的引用。 在Chrome Dev Tools中，控制台中的$0将始终引用当前选定的节点。

$0 in action 实际$ 0

5.断点 (5. Breakpoints)

I’m pretty confident you have used breakpoints in Chrome Dev Tools. However, other than the basic functionality, Chrome Dev Tools support few extended capabilities with breakpoints.

我非常有信心您在Chrome开发工具中使用过断点。 但是，除基本功能外，Chrome开发工具不支持带有断点的扩展功能。

条件断点。 (Conditional Breakpoint.)

Imagine you have to iterate through hundreds of elements to find out if one element contains inside an array, using the debugger. You can right-click on the breakpoint and add a condition to check the matching attribute values to simply break at the right iteration.

想象一下，您必须使用调试器遍历数百个元素，以找出一个元素是否包含在数组中。 您可以右键单击断点并添加条件以检查匹配的属性值，以仅在正确的迭代时中断。

Conditional Breakpoints 条件断点

DOM更改断点 (DOM Change breakpoints)

I have come across situations where multiple scripts modify DOM elements. In these situations, it is a pain to find the right script block that did the modification. Chrome Dev Tools simplifies this by allowing us to add a breakpoint to the HTML node, on the subtree modification event.

我遇到了多个脚本修改DOM元素的情况。 在这些情况下，找到进行修改的正确脚本块是很痛苦的。 Chrome开发工具通过允许我们在子树修改事件中向HTML节点添加断点来简化此过程。

DOM Breakpoints DOM断点

In addition to this, Chrome Dev Tools have the breakpoint support for XHR requests, Exceptions, Functions, and Event Listeners.

除此之外，Chrome开发工具还对XHR请求，异常，函数和事件监听器提供断点支持。

6.漂亮的打印最小代码 (6. Pretty Print minified code)

When trying to narrow down an issue in a production web app, chances of having to debug minified JS code are very high. If you open the minified file in Chrome Dev Tools, it gives a pop up to pretty-print the file. There is another button with curly braces symbols at the bottom of the editor, which has the same functionality. This will help you to get the minified code into a readable state.

当试图缩小生产Web应用程序中的问题时，必须调试最小的JS代码的机会非常高。 如果您在Chrome开发者工具中打开缩小的文件，则会弹出一个弹出窗口，以漂亮地打印该文件。 编辑器底部还有一个带有花括号符号的按钮，具有相同的功能。 这将帮助您使压缩后的代码进入可读状态。

Pretty Printing minified code 漂亮印刷的最小代码

7.切换元素状态 (7. Toggle element State)

In web apps, we use hover effects to improve the user experience. However, debugging style issues of hover effects is pretty hard, if you don’t know how to toggle the element state using Chrome Dev Tools. All you have to do is, select the element, go to the styles section and check the hover in Forced Element State Section.

在网络应用中，我们使用悬停效果来改善用户体验。 但是，如果您不知道如何使用Chrome开发工具来切换元素状态，那么调试悬停效果的样式问题就很难了。 您所要做的就是选择元素，转到样式部分，然后检查“强制元素状态”部分中的悬停。

Toggle element state 切换元素状态

Similar to hover it can toggle active, focus, focus-within and visited states.

与hover类似，它可以切换active, focus, focus-within和visited状态。

8.保留日志的能力 (8. Ability to preserve log)

When you debug your web application, if a page reload is happening, you will lose the previous network logs. This makes it challenging to inspect network calls if there are page redirections. You can use the “Preserve log” checkbox in the Network tab, to keep all the logs intact.

调试Web应用程序时，如果正在重新加载页面，则将丢失以前的网络日志。 如果存在页面重定向，这将使检查网络呼叫具有挑战性。 您可以使用“网络”标签中的“保留日志”复选框来保持所有日志不变。

9.调试任意功能 (9. Debugging arbitrary functions)

Using the Chrome Dev Tools Console, we can rewrite functions while debugging. This functionality saves time without the need to edit the original source files and refresh the page. Since these functions are not listed under the Sources tab, debugging such function seems hard. However, you can overcome this by entering the function name in the Console and double click on the method output to navigate to the VM. Using that, you can place breakpoints as if it was on a source file.

使用Chrome开发者工具控制台，我们可以在调试时重写功能。 此功能可节省时间，而无需编辑原始源文件和刷新页面。 由于这些功能未在“源”选项卡下列出，因此调试此类功能似乎很困难。 但是，您可以通过在控制台中输入函数名称并双击方法输出以导航到VM来解决此问题。 使用它，您可以像在源文件上一样放置断点。

Debugging arbitrary functions 调试任意功能

10.设计模式 (10. Design Mode)

When we modify HTML, it normal to wait for the page refresh to see the changes. You can save time by usingdesignMode that allows instant modifications to the page. To toggle design mode, enter the following code in the Console.

当我们修改HTML时，通常等待页面刷新以查看更改。 您可以使用允许即时修改页面的designMode来节省时间。 要切换设计模式，请在控制台中输入以下代码。

document.designMode="on"

Design Mode 设计模式

最后的想法 (Final Thoughts)

Chrome Dev Tools is a pretty powerful tool as it comes with a number of features to help developers to build applications fast. Today I have selected ten points, which will help developers immensely. However, there are many features which are equally valuable. Let me know in the comments below, what really works for you.

Chrome Dev Tools是一个非常强大的工具，它具有许多功能，可帮助开发人员快速构建应用程序。 今天，我选择了十点，这将极大地帮助开发人员。 但是，有许多功能同样有价值。 在下面的评论中让我知道，什么真正适合您。

学到更多 (Learn More)

翻译自: https://blog.bitsrc.io/10-tips-to-improve-productivity-using-chrome-dev-tools-7918fc8203f3

chrome 开发工具