Chrome DevTools
Modify elements and styles
1. Review elements
The first way
Right-click where you want to modify the element and select Check
This automatically pops up the debug panel and jumps to the specified element.
However, sometimes some web pages will disable the right click to use this feature.
The second way
1. Open the debugging panel using F12
2. Click the Review Elements button
3. Click on the element you want to view on the page
2. Modify the style
Modify the style
After the element is selected, we can find the style in the debug panel and write the style as CSS. Updates will be made to the page in real time, which is the most direct, simple and effective way to make style adjustments.
You can also edit elements directly by right-clicking within them
Set the pseudo class
We can also style the pseudo-classes of elements
Add the class
See the style
Console debugging
The output level
In the console, you can output different levels to facilitate debugging
- log
- warn
- error
- info
console.dir()
Sometimes we want to view the attributes of an element, but when we select the element, console.log() only prints the text of the element, not the attributes
At this point we can use console.dir() to view the attributes of the element
console.table()
Console.table () can visualize JSON or arrays
A placeholder
%c: style placeholder
%s: character placeholder
%d and % I: integer placeholders
%f: floating point placeholder
% O: object placeholder
The source code to debug
In Sources we can view the document’s directory and set breakpoints for debugging.
This is very useful when we are looking for bugs in our code.
Breakpoint debugging
The Scope and the Call Stack
How to debug compressed source code?
Compressed source code usually has a corresponding compression map named Source Map
Normally, source Maps are generated automatically during development, but do not upload source Maps during production deployment, otherwise the source code is exposed to the public.
The video demonstrates a method of debugging without source Map in production environment by adding source Map through agent. It feels good, but I will not implement it because it is troublesome.
Other panel
Performance analysis
This is a panel that monitors web page performance.
Before, I didn’t really know how to use this, but after watching the video, see
We need to hit the record button for the performance analysis to appear
The network panel
In the Network panel we can see what resources are obtained from the page
Of course, it can also be used to debug the interface with the back end, check the data returned by the link, if there is a problem with the data, you can give it to the back end, if there is no problem with the data, you can find the bug
This can also be set up to simulate network conditions, used to simulate slow network environment
The application
The application interface can be used to view the stored data of the page and make some modifications
Mobile TERMINAL H5 debugging
Real machine commissioning
Real machine debugging is true trouble, not special cases directly use mobile phone access in the LAN
Or simply tap on the simulated phone screen in a browser to debug the layout
Other Practical Tips
Online modification cache
A lot of times when we are styling, we need to use the browser to modify the style, but often this situation occurs, we modify in the browser, but only back to the file to modify it, a save browser page refresh, just changed the style is gone.
So we need to save the changes in time.
