As a programming ape, do you really know how to operate Google browser

Preface —— A few days ago , My sister, who was in junior high school, suddenly got angry VX Asked me that she wanted to copy some of the circle of friends found on the Internet and send them to the circle of friends , But the problem is that it can't be copied ！

I laughed when I heard this question （ assume ： Is there any data on the Internet that my crawler can't climb ？ Haven't you heard a legend in the Jianghu —— Is it visible to climb ！）, I popped out of bed and sat up , Sit in front of the computer , Open my Google browser and enter my sister's website —— Sure enough ：

This familiar pop-up window again , It's this damn... Again VIP To enjoy the privilege of , however —— These are small problems for us Reptilians , I open my pycharm, Smack... Smack , After a while, a little crawler for the website sent by my sister will write it , Enter url , download OK：

Later , I will download and organize the txt Send the text directly to your sister , I got a good compliment from my sister and brother —— The bones of the body are going to be crisp ！ however , It suddenly occurred to me that , For my sister's programming, Xiaobai , Next time she has a similar problem, she still has to ask me , Shall I solve it for her ！

“ No, no, No ”, I warned myself —— This is IT The world taboo ！ It is better to teach fish than to teach fish —— This is the right way ！！！ however , This “ fishing ” What is it ？

I won't keep you in suspense ！ Now let's share a Sao operation —— You just use a Google browser （ Whether you are a child or an uncle or aunt ）, Take the simple steps I teach below , I can guarantee you to remove the seal , Copy whatever you want ！

First step ： Right click in the blank space of the web page -> And then click “ Check ”;

The second step ： Click the gear icon in the upper right corner of the web page ;

The third step ： Slide the mouse down , notice Disable JavaScript, Click the blank box in front to select ;

End, Now? —— You've released the seal , Copy whatever you want on this page ！

however , If you're a procedural ape , Or you want to be a programmer in the future , So it's not enough to only operate the browser just now ！ The blogger stayed up late to tidy up , We have sorted out the following about the use of Google browser debugging panel and the collection of commonly used shortcut keys , If you can master it all —— So congratulations ： You are already a very powerful programmer ！

@

TOC

1.Chrome Debug panel

（1） Common panels （ The location element in the crawler must use ！）

• Position the small arrow button ( The first one on the left )： Choose Elements panel , And activate the button , You can locate the source code location of the corresponding element in the page , Or select the source code location to navigate to the corresponding element of the page .

• mobile phone -PC View switch button ( The second on the left )： Activate the button , Web pages can be found in pc Convert between website and mobile website . Because in the process of crawling , It's relatively easy to climb the mobile website , Therefore, you can switch the web page to mobile web page through this button to realize faster crawling operation .

• Elements panel ( Element panel ) This panel shows all the images after rendering HTML Source code , In the use of selenium When crawling a web page, you can find the location of each tag through these source codes , Attributes and other characteristics . what's more , double-click html Source code or on the right css, You can change the appearance of the web page , That is, you can debug static web pages .

• Console panel ( console panel )  Shortcut key ：CTRL+~ This panel is used to display log information during web page loading , Including printing , Warning , Errors and other displayable information, etc . And it's also a js Interactive console .

• Sources panel ( Source code panel ) This panel is grouped by site , Store all the resources requested (html,css,jpg,gif,js etc. ). It is because this panel stores all the resources , So when debugging js when , The object code is found here . The panel also provides debugging button tools .

• Network panel ( Network panel )Network The panel records the details of the network request , Include request headers , Response head , The form data , Parameter information, etc ,

• Shortcut key small learning （ On the check page, enter ！）：CTRL+SHIFT+P Input javascript（ You can directly select Disabled JavaScript Options ）： You can block this website's JS Code , All of this site after refresh JS The code won't execute ！ Input full： You can take screen shots （ Will cut off the whole page ）

（2）Network panel （ Filtering requests and filtering data types in crawlers are required —— For example, filter out asynchronously loaded requests ！）

• ALL： All requests

• XHR(XmlHttpRequest object js Generate )： js Dynamic load request

• JS: JS Code

• Css:  style

• image:  picture

• Media:  Audio , video

• Font:  typeface

• DOC:  home page

• WS: WebSocket

• Hide data URLs： You can filter it out data Response

• Be careful ：（1） Upper left corner Preserve log Options , If you check the , That is, it means that the data requested by the previous page is not cleared . such as ： Log in to a web page , If this option is not checked , Because it belongs to a request before clicking login ; After clicking login, it belongs to another request . So there is no login information after clicking ！

 （2） Upper left corner Disable cache Options , Indicates to clear the cache , Generally, check , Prevent web page operation due to the existence of local cache , And lead to some unexpected errors ！

 （3） Box in the upper left corner Filter. usage ：

①set-cookie-domain:baidu.com The domain name can be filtered as baidu.com Response , Easy for you to find cookie.

②set-cookie-name:cookie The key . You can also filter the response with this key , Easy for you to find cookie. ③set-cookie-value:cookie The value in . You can also filter the response with this value , Easy for you to find cookie.④cookie-name:cookie The key . Can be filtered to include this cookie Request for key .

（3） To set breakpoints （ Reptile advanced medium JS Operations necessary for penetration ！）

The first part ： How to use ！

Purpose ： Find the place where the target data is generated through debugging （JS Penetration is necessary ！） Use breakpoints to pause JavaScript Code , Review the value of the variable and the stack called at a particular time . The most basic way to set a breakpoint is to manually add a breakpoint on a specific line of code . You can also configure these breakpoints to trigger only when certain conditions are met . On the left side of the source code , You can see the line number . This area is called line number gutter( Line number slot ). Click the line number... In the line number slot , A breakpoint is added to this line of code . For example, events ,DOM change .

The second part ： Step by step commissioning ！

The third part ： Scope ！

When the script breaks ,Scope( Scope ) The pane will display all currently defined properties at the current time .

The fourth part ： call Stack ！

• Near the top of the sidebar is Call Stack( call Stack ) Panes . When code pauses at a breakpoint ,CallStack( call Stack ) The pane displays the execution path , In reverse chronological order , Bring the code to the breakpoint . This helps to understand where to execute now , How did it get here , Is an important factor in debugging .

• Call function chain , Now call the above function

• 

2.Chrome Shortcut key

（1） Tab and window shortcuts （ a key ： Commonly used ！）

（2）Google Chrome  Function shortcut

（3） Web Shortcut

3.In The End

Most of the above knowledge points are simple operation commands , The typical kind of content that you forget when you see it . So take some advice from the big guys in the programming world ： Just look and forget , Just look at it if you forget , I don't remember —— Continue to look at ！！！