精易web浏览器如何js断点

打开web浏览器，访问项目地址，按F12，找到sources，及请求的方法页面，找到请求方法，在右侧打开的页面中，找到要调试的js，在调试单击左键，就已经在所在行添加上了断点，断点调试图标介绍，快捷键F8是执行到最后一步，F10执行下一步，ctrl+F8禁用断点，进入断点利用F10调试，当鼠标悬浮在变量上的时候可以查看到变量的值，在调试代码中单击右键，会出现很多选项，例如“Evaluate in Console”可以用鼠标选择想要查看的变量或表达式，然后右键菜单执行“Evaluate in Console”，就可以看到该表达式的当前的值了

1. 先添加webstorm运行React设置

在Edit Configurations中

添加npm

Command： run

Scripts：start

2. 再添加“Debug88”设置

在Edit Configurations中，新建JavaScript Debug，命名：“Debug88”，并设置要访问的url，对应的URL是项目启动之后所对应的访问地址，例如http://localhost:8080

3. 先运行React

再切换配置到“Debug88”，再次点击Debug“Debug88”按钮，这时候会重新打开chrome ，进行断点调试。

4. 条件断点

右击断点，在“Condition”中输入，布尔表达式，如果布尔表达式=true，命中断点，否则不停。

注意：

在WebStorm中启动调试时，WebStorm会根据你设置的url，自动打开新的Chrome浏览器进程访问这个设置的url，而且这个浏览器页面和你平常看到的浏览器差异会比较大，看不到书签栏，也看不到你先前所装的所有插件。这是因为平常我们打开Chrome浏览器进程时，并不会添加–remote-debugging-port选项，而WebStorm无法让已经打开的Chrome实例支持调试，所以必须重新打开一个新的Chrome浏览器进程，而且不能和原来的Chrome浏览器进程使用相同的用户数据文件夹。我们可以在这个浏览器上登录我们的google账号，然后将所有数据同步过来，这样下次调试时所有的书签和安装的应用也就都会存在了。我们也就可以将原来浏览器的数据导出到新的文件夹，然后在WebStorm中设置Chrome的用户数据文件夹为这个新的文件夹，这样也能将所有的书签和安装的应用导过来。

1、先启动项目。

2、在vs 的 调试 --- 附加到进程；d出 附加到进程 对话框，选中w3wp.exe文件 （前提是需要先将iis中的webservice在浏览器中打开，否则此进程不存在）

---