webstorm配置javascript项目_nodejs调试

webstorm配置javascript项目_nodejs调试目录1.WebStorm调试官方视频:2.Chrome安装插件JetBrainsIDESupport3.设置ip地址和端口号3.1查看WebStorm的Debugger端口3.2设置JetBrain

目录

1. WebStorm调试官方视频:

2. Chrome安装插件JetBrains IDE Support

3. 设置ip地址和端口号

3.1 查看WebStorm的Debugger端口

3.2 设置JetBrains IDE Support

4. WebStorm测试debug

4.1 创建一个index.html

4.2 js调试


1. WebStorm调试官方视频:

WebStorm官方视频:https://www.jetbrains.com/webstorm/documentation/

百度网盘:https://pan.baidu.com/s/1DeCrEk0c3tAjesaNHSlQ1w

参考:Debugging JavaScript in Chrome

2. Chrome安装插件JetBrains IDE Support

安装最新版本的需要翻墙,

在Chrome输入:https://chrome.google.com/webstore/detail/hmhgeddbohgjknpmjagkdomcpobmllji 

webstorm配置javascript项目_nodejs调试

webstorm配置javascript项目_nodejs调试

2.0.9_0版本百度网盘:https://pan.baidu.com/s/1bluDbiU6Dj8m4COIVc9leg

打包Chrome插件参考:Chrome插件打包成crx文件

3. 设置ip地址和端口号

3.1 查看WebStorm的Debugger端口

File -> Setting ->  Build,Execution,Deployment -> Debugger,端口号默认:63342

webstorm配置javascript项目_nodejs调试

3.2 设置JetBrains IDE Support

1. Chrome地址栏直接输入:chrome://extensions/找到JetBrains IDE Support 查看详情

2. 点击“扩展程序选项

webstorm配置javascript项目_nodejs调试

3. 设置ip和port

webstorm配置javascript项目_nodejs调试

4. WebStorm测试debug

4.1 创建一个index.html

在项目创建index.html,js添加断点;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>WebStorm js测试</title> 
    <script>
        var num, num2, total;
        function addNum() {
            num = 12;
            num2 = 32;
            total = num + num2;
            alert(total)
        }
    </script>
</head>
<body>
<button onclick="addNum()">测试</button>
</body>
</html>

4.2 js调试

1. index.html右键“Debug ‘index.html’

webstorm配置javascript项目_nodejs调试

2. 弹出:Chrome浏览器

webstorm配置javascript项目_nodejs调试

3. 点击“测试”按钮

webstorm配置javascript项目_nodejs调试

开始测试:

可以点击页面上面的webstorm配置javascript项目_nodejs调试,查看WebStorm的Debugger;

也可以直接在WebStorm进行调试

webstorm配置javascript项目_nodejs调试

 

 

 

 

 

 

 

 

 

 

 

今天的文章webstorm配置javascript项目_nodejs调试分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/77468.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注