Recently, I have been thinking about whether I do not think enough about the tool. I use those few features every day and never care about its iteration. It seems that its value cannot be reflected in my hands.
So I want to take a closer look and explore some little-known but useful features.
Note: New browser required.
1. Screenshot function
We usually use the third party screenshots, weChat for the Internet, Snipaste for the Intranet, the new Version of Google Browser has built-in screenshots.
First open F12, then press Ctrl + Shift + P and enter Capture /Capture.
The following four options appear, and clicking on them will download screenshots prefixed with the domain name.
These four options basically cover our needs.
Screen capture of current node: This is to select part of the code block, click the screen capture of the current node, the content of the current code block will be captured, this function, we sometimes want to accurately capture can use this function.
Capture area screen capture: This is the screenshot function we usually use, click capture area screen capture, there will be a cross star, box to select the part you want to capture it.
** Get full size screenshots: ** This is a great feature to capture a full size web page, even if it’s not on the screen.
** This rule takes a screenshot of the current viewable area of the page, that is, the part of the page that you can see. Areas blocked by F12 will not be captured.
Note: The developer tools (F12) section cannot be captured.
2. An overview of CSS
First open F12, then press Ctrl + Shift + P and type CSS Overview /CSS Overview.
This function can summarize the CSS of the current web page.
What can we do with this feature, for example, media query number:
We can do a review of the overall style, but also convenient for us to comb through the common style.
The contrast problem can also provide some reference for our UI style.
Now that the background colors are listed, we can think about style uniformity.
There are a lot of inline styles, maybe CSS atomization, if not, do you need to standardize?
Overall, this feature is icing on the cake for us.
3. Simulation function
This is a very interesting feature that helps you get a sense of the perspective of your weaker partner.
Start with F12, press Ctrl + Shift + P, and type Emulate /Emulate.
Let’s take a look at what mimics blurred vision:
And look at simulated blue blindness:
I believe that this function is helpful to some people who serve special people.
4. Recorder
This is a great function, Recorder as the name implies – Recorder, he can record the user and the interaction of the web page (mind aiter under the company’s interaction).
First open F12, then press the shortcut key Ctrl + Shift + P, and then enter Recorder.
Click Start, and then enter the operation name: Digging gold black maple page interactive combing.
And then we can dot around and record what we’re doing.
Click “End” to end the recording, we can return to our operations, but also to analyze our operations.
The analysis includes screenshots, memory, web metrics, fine sewn tools.
We can learn a lot from this, like the event log, and we can see what happens after we trigger the action.
And call tree, we can know asynchronous task, timer, animation frame, garbage collection and so on execution.
Recorder does have great help to our webpage analysis.
5. Performance monitor
Here comes the unavoidable topic of performance optimization. I combed through an article about performance optimization:
How to optimize front-end performance at work (21 optimizations +7 positioning methods)
Now there’s another way to locate it: performance monitors.
First open F12, then press the shortcut key Ctrl + Shift + P, then enter Performance Monitor/Monitor.
The data is very intuitive and can be opened when browsing the web for reference.
JavaScript performance profiler
It’s also a tool for performance analysis.
First open F12, then press Ctrl + Shift + P and enter Profiler/Profiler.
When we click on Start and browse our website, a performance profiling report appears.
Many friends will think that sharing so many methods will definitely not work, why share so much.
Well, every method has its place, just like every flower has its season.
7. The sensor
First open F12, then press Ctrl + Shift + P and enter sensor/Sensor.
It can simulate location, model, orientation and active status of the phone.
(I heard you can remote company clock, want to try!)
8. Extensions
This is one of the things we use a lot, but it seems that this part of the function is not appreciated, make good use of the browser plug-in can bring us a lot of help.
**Allow-Control-Allow-Origin: ** Allow-Control-Origin: ** Allow-Control-Origin: ** Allow-Control-Origin: ** Allow-Control-Origin: ** Allow-Control-Origin: ** Allow-Control-Origin: ** Allow-Control-Origin: Nonono, just download this and you’re done.
Ajax Interceptor: This browser plug-in helps you mock data by filling it with interfaces and data. The plug-in intercepts and mocks data automatically.
Window Resizer: Can change our browser to different resolutions and adjust the responsiveness when believing it is used.
** Intranet environment does need him, after all, a lot of errors are a little do not understand.
The best browser plugin I’ve ever used: crxdl.com/