To do a good job, must first sharpen its tools, skilled use of all kinds of tools can greatly improve work efficiency. Because these tools are so powerful and complex, here are some common features and what they can do that you might not have thought of. Operation can search the corresponding graphic and text tutorial according to the specific function.

VSCode

What code editor does the front end recommend? Of course is free itself is JS prepared by Microsoft factory super editor VSCode!! Those who have transferred from WebStorm can also use WebStorm preset shortcuts in VSCode.

shortcuts

Here are some of the Mac shortcuts I use the most:

  • Cmd + P: A quick search opens a file in the project
  • Do not select any text Cmd + C or Cmd + X: Copy/cut the entire line where the cursor is, and pressCmd + VQuickly copy multiple lines
  • Cmd + F: Searches for text in the open file. Note that in the search box, you can select strict case, strict match of whole words, and enable re. You can replace the matching text in the search box
  • Cmd + Shift + F: Searches for text throughout the project, same as above
  • Control + G: Quickly position the cursor to the line corresponding to the input number
  • Cmd + ↑, Cmd + ↓: Position the cursor to the first/last line of the file
  • Cmd + number key: Toggle or create the NTH edit window, write Vue can be three Windows, a template, a script, a style window
  • Control + ` : Call/close the terminal
  • Cmd + B : Invokes/closes the sidebar
  • Cmd + ` : switch to the next VSCode window

Handy plugins

  • Prettier: a plug-in for formatting code that adds the.prettierrc.json file to a project to unify a team’s formatting style
  • ESLint: Code lint plugins that unify team lint rules by adding.eslintrc.js files to projects
  • GitLens: View Git commit records. You can view the latest commit information of the cursor line and file history
  • Path Intellisense: When you enter a Path, the file Path is automatically completed
  • Vetur: Write Vue must install plug-ins
  • WXML: write small procedures must install plug-ins

Chorme DevTools

Chrome developer tools, front-end development students will debug tools, in a word is powerful to the bottom. It is recommended that you click on each function, know the meaning of each word, understand the function of the tool, and know which function to use when necessary. Check by right clicking on the page, or in the upper right corner menu -> More Tools -> Developer Tools to open the debug interface.

Elements, Console, Sources, Network, and Application are some of the most important essential base tabs that we use to get our work done. Others are advanced tabs and are mostly used for performance test tuning.

Interface Function button

After opening the interface, first look at the two icon buttons in the upper left corner:

  1. An icon with a mouse pointer is used to select the DOM in the page and find the corresponding HTML code position of the PAGE DOM. It is often used for debugging styles and viewing DOM attributes.
  2. The other is the icon in the style of mobile phone and iPad, which is used to simulate the display of the page under different window sizes of mobile phone -> PC. It is often used to test the adaptability of the page and the display effect of the page under different screens. Note that switching to mobile mode will also change the user-agent field of the Header in the request. Simulation is not a complete substitute for real machine debugging.

Elements TAB

Main functions: debugging HTML and CSS, can edit HTML and CSS in real time and take effect in real time. There are several sub-tabs under this TAB that do the following:

  • Styles View CSS for the selected DOM (including browser default Styles), view box models for the selected DOM (margin, border, padding, content)
  • Computed displays the effectiveness of a selected DOM, and you can use this to check whether the style code is valid or not, based on the effectiveness of CSS selectors, weights, inheritance, and defaults
  • Event Listeners View bound Event Listeners to check whether events are bound.

There are also a few sub-tabs that I don’t use very often, so you can explore them on your own

The Console TAB

It is mainly used to view printed logs and execute JS. The printed log can be screened by various postures. You can also click the number of lines on the right of the log to directly view the corresponding code position for printing, which is convenient to interrupt the point.

The JS code entered by the console will be executed in the context of the current page, for example, if JQuery is added to the page, the $variable can be retrieved from the console. You can try on the console to see if you can get the DOM, if you can get global variables, and if you can execute the expression as expected.

Sources TAB

Very important TAB that works with Console to debug JS. This TAB displays the source code for a web page in the form of a domain + directory and allows developers to debug code execution breakpoints. If you print logs in the Console, you can also quickly locate the corresponding code in Sources.

The TAB contains three sections:

  1. A directory of code files with a domain name and path generated according to the file’s load URL.
  2. File preview, JS files can be set to debug breakpoints by clicking the line number
  3. Code debugging toolbar: After setting a breakpoint, the code execution will be suspended when it reaches the breakpoint. At this time, you can operate the button on the toolbar to control the code execution. Toolbar button functions should be mastered. Functions of left-to-right buttons:
  • 3.1 Pause/Resume Execution. If the execution has been paused at the breakpoint, click Resume to proceed to the next breakpoint.
  • 3.2 Execute the next line of code (if you encounter a function, execute the whole function and get the result)
  • 3.3 As above, execute the next line of code but enter the function being executed, executing the function line by line.
  • 3.4 Jump out of the executing function
  • 3.5 To execute the next line of code, usually only 3.2 and 3.3 are used
  • 3.6 On/Off – Ignore breakpoints during execution
  • 3.7 On/Off – Pause when encountering an exception
  • At the bottom of the toolbar, you can also see the current variable and its corresponding value to help debugging

This is the JS error when the most commonly used the best function, not skilled should be more familiar with more use.

The Network TAB

Important tabs for debugging network requests. From top to bottom, the interface is: Settings bar, filter criteria, time waterfall stream, request list. Mainly used to debug static file requests and interface requests.

  1. Setting bar: enable or disable listening, clear the list, open the filter bar, open the search bar, reserve the records before the jump when refreshing the jump page, disable cache, limit network speed, etc.
  2. Filter criteria: Different types of requests such as XHR, JS, CSS, IMG, and Font can be screened out
  3. Time waterfall stream: Shows the timing and response time of a request in the form of a waterfall stream, which can filter requests within a certain period of time
  4. Request list: Click on the request list to see the Headers, Response and Timing of the request. For static files, you usually check the path, return status code, file size, and cache policy of the request header. For back-end interface requests, you can check the request path, status code, response time, authentication information of the request header, other information of the request header, request parameters, and returned values to troubleshoot problems.

Application TAB

The main function is to view and operate the current page using LocalStorage, Cookie, click on the left side of the interface to choose LocalStorage or Cookie to view, you can add, delete, filter them.

The Performance TAB

Debug web performance. After you click Start to record, you can perform operations on the page. After the recording is complete, the page performance information during this period is displayed.

Performance information includes operation time, FPS, CPU usage, GPU usage, network usage, and thread usage. Performance information can be used to locate performance bottlenecks during operations.

The Memory TAB

This TAB records information about memory usage. You can use this TAB to troubleshoot memory leaks or excessive memory usage

Lighthouse TAB

Similar to Performance, it provides website experience ratings and suggestions. Clicking on the generate report gives the page a score of five: performance, reacheability, best practices, SEARCH engine optimization, and PWA, which developers can refine based on suggestions

Recorder TAB

Record web page operations and allow playback operations, mostly used to record bugs and reproduce them

Security TAB

Provide website security related advice, HTTPS, certificates, etc

Charles vase Tools

The vase is mainly used to capture packages and proxies. When using it, you need to set the proxy to the vase locally, HTTPS and a certificate to trust the vase. For detailed steps, you can see the special graphic tutorial (Portal: Charles function introduction and use tutorial). The package capture function is the same as the Network TAB in Chrome Developer Tools.

Other application tools to improve efficiency

  • Can save multiple copy content paste board (simple function, each platform choose free on the line), copy and paste engineers necessary tools
  • Alfred, also known as black Hat, is a quick startup tool in MacOS that allows you to quickly use a keyboard to perform a variety of applications and script one-click interface actions
  • Front-end online tools, such as quick conversion of JSON, color, time, encryption and decryption, etc., recommended website tool.lu
  • Online picture compression tinypng
  • Chrome colorPick allows you to quickly color a point on a page
  • Chrome plugin Google Translate, fast text translation, pay attention to Google Translate official website does not need to turn over the wall, machine translation quality should be the highest machine translation software

React and Vue React and Vue React

— small tail — my name is ge shengming, good at the front end, have ideas have questions welcome private discussion ^_^