I wrote this series of articles to give beginners a quick introduction to front-end technology. This article focuses on using Google to debug Web projects.

  • 1. Build Demo

  • 2. Program debugging

  • 3. Package and deploy

Google Emulator Debugging

Hold down option + Command + I or Option + Command +J at the same time to enter the debug state (the default debug entry for printing logs).

1.1 debugging CSS

1.2 debugging JS

React debugging JS code is basically the same as debugging ReactNative. The debugging modes are as follows:

  • 1, breakpoint debugging: find the local file to be debugged, add breakpoints in some corresponding locations, when the program runs to the location, will be suspended, you can directly view the data near the breakpoint, or print logs

  • 2, print debugging: you can view the log output by console.log() added in the program, or directly write code in the port, output logs

  • 3, global search keywords: you can quickly locate the files containing certain keywords

1.3 Debugging the Network

Js debugging network request, can be directly in the browser to view the input parameter, interface returned data, cookies (front-end will generally _wTK, _TK in the cookies, to achieve free login)