如何在vs cdoe中debug PHP中的js文件

前期准备

安装vscode和chrome

配置

CakePHP 3.6.1
PHP 7.4.10
js文件在<ProjectFolder>\webroot\js\里

步骤

1.在【拓展】里搜索【debbuger for chrome】并安装

2.点击运行和调试面板，从开始调试隔壁的下拉菜单里选择【添加配置】

3.在弹出来的面板中选择第二个【Chrome：Attach】

4.在自动生成的配置文件中，修改port和webRoot属性

4.1其中，port端口改成php服务器的端口

4.2在原来的webroot属性后添加项目公开访问路径（在cakePHP里是/webroot）

5.保存配置文件，选择第二个配置文件，点击【开始调试】

vscode会自动调出chrome

6.在地址栏输入你要debug的页面，可以看见【调用堆栈】面板中有正在运行的【会话】（为什么这里是会话，我也不知道...）

7.回到js文件，在想debug的地方添加断点breakpoint

8.函数运行到有断点的地方就会暂停，可以用vs code顶端的调试工具栏来实现单步调试和单步退出等功能

9.大功告成，开始你的debug吧