Webstorm下怎样结合chrome debug js程序

时间：2026-06-18 编辑：ln

在webstorm中结合chrome进行javascript程序的调试，能让开发者更高效地排查代码问题。以下是详细步骤。

首先，确保webstorm和chrome都已安装且处于最新版本。打开webstorm，创建或打开一个包含javascript代码的项目。

然后，在webstorm中配置chrome调试。点击菜单栏中的“run”，选择“edit configurations”。在弹出的窗口中，点击左上角的“+”号，选择“javascript debug”。

在“javascript debug”配置界面中，设置好调试的名称。在“script”字段中，选择要调试的javascript文件。接着，在“environment variables”中，可以根据需要添加环境变量。

配置好webstorm后，需要在chrome中进行相应设置。打开chrome浏览器，在地址栏输入“chrome://settings/help”，确保chrome版本支持调试功能。然后，在地址栏输入“chrome://flags/enable-remote-debugging”，将该选项设置为“enabled”，重启chrome浏览器。

回到webstorm，点击配置好的调试配置项的绿色运行按钮，这时webstorm会启动一个调试会话，并等待chrome连接。

在chrome中，访问要调试的网页。此时，chrome会提示是否允许远程调试，点击“allow”。

当chrome连接成功后，webstorm的调试界面会显示出来。可以在代码中设置断点，当程序执行到断点时，会暂停运行。

在调试界面中，可以查看当前的变量值、调用栈等信息。通过“step over”（f8）可以逐行执行代码，不进入函数内部；“step into”（f7）会进入函数内部；“step out”（shift+f8）则会跳出当前函数。

还可以使用“resume program”（f9）继续执行程序，直到下一个断点。通过这些调试工具，开发者能够精准地定位和解决javascript代码中的问题，提升开发效率，确保程序的质量。无论是简单的逻辑错误还是复杂的运行时问题，都能在webstorm与chrome的配合调试下迅速找到根源并解决，让开发过程更加顺畅。