Cool Chrome DevTools tips and tricks you wish you knew already
Drag and drop Elements from the Elements panel
Move HTML Elements in the Elements panel to quickly preview the effects when communicating with the UE. Previously I only knew that you could remove the element 😂.
Gets the currently selected element in the Console panel
First of all inThe Elements panelSelect an element and then selectThe Console panelIn the input$0Press enter. If your front-end project uses jQuery, you can use jQuery$($0)Further use the jQuery API functions.
The result of manipulating the last expression in the Console panel
In the execution context of Console, $_ is used to get the result of the last expression and can be used further.
Styling and changing the state of elements 🔥
There are also three buttons in the Elements panel that are particularly useful. 👈
+The “button creates a new style combination space, and we can also modify the selector. The translation is not good.
: HOV allows you to manually change element state, hover, active, focus, and so on
CLS quickly adds a class to the selected node
screenshots
Select an element in the Elements panel and type the shortcut cmd-shift-p (or Ctrl-shift-p in Windows) shot and then there are three options. The diagram below:
Use CSS selectors for element selection
Open the Elements panel and enter cmd-f (Ctrl-f in Windows) to bring up the search box.
XHR/Fetch debugging
Not recommended, preferring to add debugger to your code. Phrases. You need to operate in the Source panel, as shown below:
Break points for element nodes
Select the element node, right-click, Break-on there are three options, according to the need to select, respectively for attribute change, child element change, element removal trigger breakpoints.
We have what easy to use skills welcome to add 👀