Chrome browser-search engine optimization portable tool

The Chrome browser is also a powerful SEO tool. To find DevTools, please go deeper into the “Developer Tools” section under the “More Tools” menu to access the webpage source code, the load time waterfall graph shows the load time of each element on the page, and the Lighthouse review tool optimizes performance ,and many more.

Google search engine optimization

The Network panel is divided into five panes:
The first line is the control pane. The options in the pane are used to control the appearance and specific functions of the network panel;
Functions include recording screen, after recording, each frame of the recording will be displayed in a form similar to “ppt” (I usually use debugging animations, very practical), you can pull the timeline;
You can choose to open the filter filter to control which download resources are displayed in the Request Table pane (fourth), support regular expression filtering, and select different types of resources;
It is worth mentioning that the “Disable cache” option is used to control whether to support caching (when you change the css, js file on the server multiple times and then need to view the effect of the change in the browser, you can turn on this option to prevent browsing The old cached file used by the device, so you ca n’t see the change effect);
Similar to throttling in device mode, the network environment can also be simulated here;
In the third “Overview” pane, the icons inside it show the timeline of resource retrieval time (like a waterfall if there are many resources), you can click on the timeline to view it for a period of time;
The fourth “Request Table” pane lists each resource retrieved, as well as their loading time, resource type, server return status code (such as 200), size, and mouse over the colored bar on the right to see The detailed waterfall chart, the more powerful is the right-click resource, there are many operations, such as copying the resource request / response header, message and URL (the header message does not know the http protocol in the computer network)
You can select user agents / devices according to the device, or you can add a custom device to the devtools setting to imitate device touch and scroll events, support horizontal and vertical screens, and choose whether to display the device frame
The media query can be started in the menu (check each query set by @media in css);
Adjustable DPR (device pixel ratio, logical pixels / physical pixels, device with Retina screen has high pixel density, large DPR), this value can be set in the response type, and it is not selectable when a specific device is selected because DPR value is fixed;
“Throttling” can simulate different network environments and can limit the network speed;
Can simulate replacement of geographic location, simulate accelerometer (device orientation);
Security Panel
Click View certificate to check each source to view the connection and certificate details (secure source) or find out which requests are not protected (non-secure source).
Click View certificate to check each source to view the connection and certificate details (secure source) or find out which requests are not protected (non-secure source).
The Security panel can distinguish between two types of non-secure pages.
If the requested page is served via HTTP, the main source will be marked as insecure.
If the requested page is retrieved via HTTPS, but the page will continue to use HTTP to retrieve content from other sources, then the page will still be marked as unsafe. This is called a mixed content page. Mixed content pages are only partially protected because HTTP content can be obtained by sniffer and vulnerable to man-in-the-middle attacks.
Use the left panel to check various safe or unsafe sources. Click on the secure source to view the source’s connection and certificate details.
The tool provides the function of dynamically editing the source code of the page, allowing you to take screenshots to optimize suggestions. Just double-click any part of the source code and start typing, and you will immediately see the changes on the page.
Opening method:
* From the Chrome menu, choose More Tools> Developer Tools
* Right-click on the page element and select “Check”
* Use the shortcut keys Ctrl + Shift + I (Windows) or Cmd + Opt + I (Mac)

Leave a Reply

Your email address will not be published. Required fields are marked *