Six tips for Chrome Developer Tools: chrome developer

Six tips for Chrome Developer Tools: chrome developer

The following is an article by Umar Hansa. Umar has a newsgroup. I am a fan of him. He kindly wrote this draft as a newsgroup at our request. I will ask him to introduce himself.

Hey, I'm Umar. I like to share Tips related to web development on Twitter (@ umaar), and I also like to share development Tips in the form of gif through Dev Tips. Dev Tips is a news group for developers. Currently, it is mainly related to Chrome development tools. Before getting started, I would like to thank CSS-Tricks for giving me the opportunity to make some contributions to one of my favorite organizations.

This article will cover six popular tips for Chrome development tools. Some may have read some of them. If you have some knowledge, I hope this article will also play a new role in your debugging journey.

DOM search with CSS Selector

Https://cdn.css-tricks.com/wp-content/uploads/2015/08/search-by-selector.mp4 video

Here is a convenient way to quickly find the DOM node you need. On the Elements panel, press Cmd + F (Ctrl + F on Windows) to open the search box. You can search by using the following tools:

• CSS selector: This is cool and also the significance of this technique. For example, use a [href = ''] To find all anchor elements (a tag) with null href values, or use real-time update search results to traverse DOM nodes.
• String: for example, a text in a paragraph element.
• XPath: it may not be the most popular, but it is worth knowing where it is.

Media query Viewer

Https://cdn.css-tricks.com/wp-content/uploads/2015/08/media-query-inspector.mp4 video

Assume that you have an understanding of the Device Mode.

You can register a media query for your style. In device mode, such a Media Query is displayed in the Media Query Inspector. The width of the colored media query bar is aligned with the ruler.

• You can click the scale in the media query bar to trigger the media query-this will set the View Size in sequence.
• You can hover over the scale to see the correct tooltip.
• You can right-click the scale in the media query bar and select Show source code. This will locate you to the place where the media query is defined in the source code.

Https://cdn.css-tricks.com/wp-content/uploads/2015/08/media-query-inspector-reveal.mp4 video

Copy a response

Https://cdn.css-tricks.com/wp-content/uploads/2015/08/copy-response.mp4 video

On the network panel, you can right-click a resource and select copy response to copy the resource content to the clipboard. In addition, you can drag a resource to the editor directly on the resource panel. In this way, the content of the file can be embedded in the editor.

Copy as cURL

Https://cdn.css-tricks.com/wp-content/uploads/2015/08/copy-as-curl.mp4 video

On the network panel, you can right-click a resource and select copy as cURL. The developer tool puts a terminal-friendly instruction in the clipboard, which contains the original request header. In this way, you can determine that your request is as close as possible to the initial request.

Embedded JS values

Https://cdn.css-tricks.com/wp-content/uploads/2015/08/inline-js-values.mp4 video

Recently, many improvements have been made to debug JavaScript in developer tools. Now you can pause at a breakpoint and receive visualized feedback on the current state of the variable. The values embedded next to the code will display the parameters of nearby functions.

Switch the on/off of this feature in Settings> General> Sources> "Display variable values inline while debugging.

Network slides (first glance !)

I think it's cool to show a feature that might be coming soon. In fact, this feature is so cool that it needs its own warning.

This is an experimental feature of developer tools. The experimental features may break through, change, or disappear, so remember this.

Https://cdn.css-tricks.com/wp-content/uploads/2015/08/network-filmstrip.mp4 video

If you have used WebPageTest before, this slide feature may seem familiar. It shows you the screen in page rendering. What's important is that it can understand what your users may see.

In the CSS-Tricks record, we noticed that:

• Page rendering without text was initially performed because the font was not ready.
• Secondary content loading, such as advertising/sponsorship, is after the primary content is loaded.
• Because the time data is displayed, a specific display screen can match the rendering time, and we can see the main content in less than one second.

This feature is not available by default, but a quick search will show you how to make DevTools hidden experiments available. But remember the above warnings!

Two days ago, I saw someone in a group who recommended an app to ask questions. They could answer questions, just like uber Didi took a taxi, generally, this kind of software throws money to give a red envelope. Brother has experience in using uber tickets before! I have tried it several times and I can use it to cash out the registered red envelopes and the money I received before. I have raised more than 50 yuan, and I can use it in visual testing. Ps, but try to ask technical questions, otherwise it will be easily blocked.
If you have any technical skills, you can try it yourself. If you do not, you can ask me 315414695: QQ Group 290551701 has gathered many Internet elites, Technical Directors, architects, and project managers! Open-source technology research, welcome to the industry, Daniel and beginners interested in IT industry personnel!