webstrom 断点调试,小白详细步骤篇

网上找了很久都是七零八落的,要么就是不够通俗易懂故作此文章记录和分享

设置debug调试

  • 编辑器右上角点编辑配置
    webstrom 断点调试,小白详细步骤篇_第1张图片

  • 点击+号选js调试
    webstrom 断点调试,小白详细步骤篇_第2张图片

  • url填你项目运行的url和端口,以及用于调试的浏览器
    webstrom 断点调试,小白详细步骤篇_第3张图片

webstrom 断点调试,小白详细步骤篇_第4张图片

添加断点和运行测试调试

  • 这里打上断点

webstrom 断点调试,小白详细步骤篇_第5张图片

  • 点击右上角debug小虫运行并打开F12检查
    webstrom 断点调试,小白详细步骤篇_第6张图片
    这里是运行起来的状态,可以随时停止
    webstrom 断点调试,小白详细步骤篇_第7张图片
    基本上整个debug流程就是这样,其他的npm,doctor等调试也可以看自己需求去创建,这里就演示一下页面的js调试案例

你可能感兴趣的:(javascript,测试,webstorm)