Source code analysis in the browser and browser source code analysis

Source code analysis in the browser and browser source code analysis

We have been using browsers all the time. Have you ever played with him? NO!

In IE browser, open a webpage and right-click the menu bar to view the source code. However, the source code is too long to be analyzed.

The browser added a feature called the review element feature.

In Google's browser, open a webpage, right-click a webpage, and choose check from the menu bar. In sogou's browser, open a webpage, and right-click a page with a review element on the menu bar; I have not tried other browsers.

 

I. Introduction to review elements

Take the most commonBaiduThe search interface is used as an example to open the review elements, as shown in:

The review element interface appears on the right, that is, the Html code element of the webpage.

Including the following modules

Elements (Element/Tag):

View All HTML elements on the page. The left side is the HTML Tag displayed in a tree structure. If you move the cursor over the tab, the location and actual length and width of the tag are displayed on the page. On the right side is the CSS attributes and inheritance relationships of each element, as well as DOM attributes, inheritance relationships, and bound events.

Resource (Resources):

Displays all resources, pages, images, style sheets, and scripts used on the page. There are also local storage and cookies.

Network (Network):

To display all network events, you must open the developer tool and switch to this tab. Then, refresh the page to display the events.

The information of each file, where to trigger this network activity, HTTP header, and so on are displayed.

Sources (Source code):

It is used for js debugging. There is a list of all js Code on the left, with the code area in the middle (the function of formatting the code below), and breakpoints, triggers, call stacks, and so on the right.

Timeline (Timeline):

You also need to open this tab and click Start capture below to display it.

This tab displays all the time on the page, including running scripts, network activities, page rendering, and so on.

The CPU and memory occupied by each activity are displayed in detail.

You can use this information to optimize the web page.

Profiles (Report):

You can take a period of CPU usage reports, CSS usage reports (to Remove unused CSS), and heap memory snapshots (to optimize js scripts and DOM structures ).

Audits (Audit):

Ask Chrome to give your webpage some suggestions, which code is generally not necessary or useless.

Console (Console):

This is a js console. You can directly run js Code to operate on the page.

Ii. Use review elements to modify webpages

The element tag displays the html source code of the elements on the webpage. As you move your mouse over the code, the element control you point to is displayed on the left.

 

The most basic isHeadThe title of a Web page is set as follows.

<Title> Baidu, you will know </title>

BodyIs the layout of the entire web page.

As shown in the left figure, it is the code in the menu bar in the upper right corner. The menus we can set are glutinous rice, news, and maps. And corresponds to a connection, which we can modify.

 

For example:

 

 

Note: This type of modification can only be modified locally. Of course, the website itself cannot be modified.

 

3. Use review elements to download webpage videos

When a video is played on a webpage, the cache is an element that is savedResource(Resource). First, we play a video. Taking Youku as an example, we open Youku and play a video at will. Then, we open the review element and select network to view the network events currently running. There is a list below and click "sort by size, if the file size is relatively large, it should be the video file (because the file encoding is code, so it is not convenient to see the file name, it can only be identified by the size). Find the file and click the correspondingInitiator(That is, the initiating program, that is, the source address of the resource)You can jump to the corresponding resource file area and double-click to download it.

Because Youku and other website videos are loaded at breakpoints, that is, a segment. When you watch the video at 1 minute 1 second, it only caches the first segment. When you see the first segment, it caches the second segment. Therefore, you must cache multiple segments to download them all.

 

As shown in 2, there are a lot of breakpoints. You can cache the second segment and the second segment. Then, the second segment is cached, and then the third segment is cached.

 

 

4. Web programming Learning

We can also use the web page for some small plug-ins, such as the plug-in for automatic account logon. We know the elements in the web page, the idnumber of these elements can be filled with it through the program. The implementation of some content such as Xunlei member cracking is also based on this, and the idnumber of the Software Web control is used to operate it.

The following describes how to create an automatic login plug-in.

Http://www.cnblogs.com/dyllove98/archive/2013/08/01/3230968.html

 

The format of the article is not good, you can refer to the Word version of http://wenku.baidu.com/view/907bf4dc763231126fdb118f

 

Message: The power of code is great. You must have an eye that is good at discovering the world.