头图

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

chiiinnn

前期准备

安装vscode和chrome

配置

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

步骤

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

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

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

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

4.1其中,port端口改成php服务器的端口
image.png

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

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

vscode会自动调出chrome

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

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

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

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

阅读 736
4 声望
0 粉丝
0 条评论
你知道吗?

4 声望
0 粉丝
文章目录
宣传栏