Browser development and use skills

Browser development skills

debugging hover Elements appearing after

Method 1

• Open the debug window F12, Move the mouse over the element to be debugged
• Right click to do nothing
• Move the mouse to the debugging window and press N, The elements that appear will not disappear

Method 2

• Select the... That triggers the mouse event in the debug window div On , take :hov The property of is set to :hover
  

---

JS Breakpoint debugging

debugger The way

• stay js Write in debugger The browser debugging window can be used debugger Pattern

Directly break the point in the debugging window

• Make a breakpoint in the source code of the browser debugging window to debug
• F10 next step 、F8 Do it all
  

---

Browser shortcuts

• Zoom in CTRL + +
• Narrow down the content CTRL + -
• Back to normal size CTRL + 0
• Tab switching CTRL + 1~9 (1~9 Each represents the first label , Second label …)
• Open new label CTRL + T
• Search content CTRL + F
• Go back to the previous page CTRL + left arrow
• Go back to the next page CTRL + Right arrow
• Refresh the page CTRL + R

---

Console Use

• console.table： Show concretely JSON And array data

Overrids Use local Js Replace the Js

• browser f12SourcesOverrides Click the plus sign below to add a zero hour local directory
  
• On the way to page Page find the file to replace, right-click save as overwrite , At this time, the file on the right will have * To his own js After the content is copied into this file ctrl+s preservation , And then refresh the browser , This is the one you replaced js, It can debug online content very well
  

F12

ctrl+shift+p Call up the command line

• screenshot screenshots

• show animations Open the animation panel

Elements （Elements）

• View element code , arrow （ Or the user can use the shortcut key Ctrl+Shift+C） Enter select element mode , Then select the element you want to view from the page , Then you can use the developer tool element （Elements） Locate the specific location of the element source code in the column .

• Modify the code and attributes of the element ： Double click the part you want to modify , Then make the changes , Or select the part to be modified and right-click to modify
• stay styles Click the color in the to pop up the color finder

• Use $0 Get current element
  

The Internet （Network）

• see Network essential information , Which addresses are requested and each URL Network related request information can be seen URL, Response status code , Response data type , Response data size , response time .

• request URL It can be screened and classified , Choose different categories , View request URL, Easy to find

• Simulate and adjust the network speed
  

• Right click request Replay XHR（ scene ： Want to resend a request , But I don't want to refresh the page or trigger events manually ）

Console

• Input log execution js, stay debugger You can enter the value of the variable

• console.clear() Clear the console

• $_： The result of the previous expression

Ctrl+P

• Quick search for files , Open the file of your project .

Vue Check the size of the packaged file

Use webpack-bundle-analyzer

• install webpack-bundle-analyzer：

npm install webpack-bundle-analyzer --save-dev

• To configure webpack.config.js file ：

// webpack.config.js  file 
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
    
  plugins: [
    new BundleAnalyzerPlugin()  //  Use default configuration 
    //  Specific configuration items of the default configuration 
    // new BundleAnalyzerPlugin({
    
    // analyzerMode: 'server',
    // analyzerHost: '127.0.0.1',
    // analyzerPort: '8888',
    // reportFilename: 'report.html',
    // defaultSizes: 'parsed',
    // openAnalyzer: true,
    // generateStatsFile: false,
    // statsFilename: 'stats.json',
    // statsOptions: null,
    // excludeAssets: null,
    // logLevel: info
    // })
  ]
}

• To configure package.json file

{
    
 "scripts": {
    
    "dev": "webpack --config webpack.dev.js --progress"
  }
}

• Start script access address