Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Devtools set

F12 top right corner gear

1. Modify the theme (black/white/follow system)

2, specify the language of the development panel, the advantage is easy to understand the menu, the disadvantage is no familiar taste (refers to the development of the English panel)

Element/Node (Element)

In this TAB, you’re dealing with HTML element nodes, styles, and events

Fixed element interactions

Sometimes we need to debug styles such as :hover, :active, :focus that require dynamic interaction. The usual way is to modify the style, manually to interactive trigger, and then debug the effect, slightly troublesome

Now, as an example, right-click the node that needs interaction and force the state -> :hover to directly fix the interaction effect. We can find the corresponding :hover style on the right side and slowly adjust it

Or, let’s fix the interaction in another way:

  1. Select the corresponding element
  2. Click on style Adjustments in the top toolbar:hov
  3. Select the corresponding trigger state
  4. Adjust in the corresponding style

Add conditional breakpoints for elements

As shown, right-click the element, and the condition for the break -> 3 is optional

  1. A breakpoint is triggered when adding an element node associated with this event through A JS DOM operation
  2. Property modification to execute JS code on the element associated with this eventdocument.getElementById('demo').setAttribute('attr', 'val')A breakpoint is triggered
  3. Remove a node, for exampleid="demo"Element associated with this event, calleddocument.getElementById('demo').remove()Deleting this node triggers a breakpoint

Note: the above trigger events, are injschangedom(1) If you want to modify it directly in the development panelhtmlIs not triggered; (2) the jsdocument.getElementById('demo').value = 1Property modification events are not triggered; ③ Directly right-click the menu in the panelRemove elementsThe event to remove the node is not triggered

Console

Switch the iframe layer

Console operation scope, the default is the top layer, sometimes we debug the page nesting situation, at this time we switch to the specific operation iframe, can manipulate the corresponding scope data

Add real-time expressions

Click 👁 to pop up the input box, we input the expression to listen, and then modify the property value in the expression in the console, the expression will change dynamically. You can dig up other, more powerful uses

The exception level displays the classification

Tell the console what data to display according to your needs

Source

Big deal. Every secondary menu in here has a big purpose

Web page

All resources used on the page, such as JS, CSS, IMG, etc., are displayed in a tree arrangement according to the path

Sometimes when we debug js code on someone else’s site, it may be compressed, or it may be badly formatted and not easy to read. In the lower left corner of the open JS file, there is a button with double curly braces. When clicked, DevTools will give us a new copy of the formatted file to read

The file system

According to the official documentation, if it’s a VUe-CLI built project, you can add a VUE project to the workspace, and then you can edit the source code in DevTools and the effect will be automatically updated, wySIWYG

replace

A very useful feature. For example, we are in production and we have an exception to handle. There are two kinds of solutions that we do most often

(1) Back up data related to the production environment to the local PC, and then modify and test the data

(2) Directly in the machine blind modification, check and confirm the correct update to the production environment, if the luck is good, a pass, if the luck is bad, back and forth

Now there is a more excellent solution. We directly overwrite the files to be repaired in the production environment with local files, test them on the machine, and update them to the production environment after confirmation!

  1. Under the Replace menu, add a folder where the debug copy will be stored
  2. When adding a folder, DevTools will pop up and ask you to confirm it
  3. Edit any file and thenctrl + sWhen saved, DevTools will automatically save the copy file toStep 1.In the created directory

Also refer to the GIF effect below

The code block

Google Chrome saves some JS code snippets for us. But when we need to, we can right-click the corresponding snippet and let it run

Creation is not easy, look forward to your encouragement ❤~