preparation

Install VS Code and Chrome

configuration

CakePHP 3.6.1 PHP 7.4.10js file in \webroot\js\

steps

1. Search “Debbuger for Chrome” in Extension and install it

2. Click the Operation and Debugging panel and select “Add Configuration” from the drop-down menu next to Start Debugging.

3. Select the second pane in the pop-up [Chrome: Attach]

4. In the automatically generated configuration file, modify the Port and Webroot properties

4.1 The port port is changed to the port of the PHP server

4.2 Add the project public access path after the original Webroot attribute (/ Webroot in CakePHP)

5. Save the configuration file, select the second configuration file and click “Start Debugging”.

VS Code will automatically call up Chrome

6. Enter the page you want to debug in the address bar. You can see the session running in the call stack panel.

7. Go back to the JS file and add breakpoint where you want to debug

8. The function is paused at a breakpoint. You can use the Debug toolbar at the top of VS Code to step out and debug

9. You’re done, start your debug