目录
2. Chrome安装插件JetBrains IDE Support
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
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
3.2 设置JetBrains IDE Support
1. Chrome地址栏直接输入：chrome://extensions/找到JetBrains IDE Support 查看详情；
2. 点击“扩展程序选项”
3. 设置ip和port
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'”
2. 弹出：Chrome浏览器
3. 点击“测试”按钮
开始测试：
可以点击页面上面的
也可以直接在WebStorm进行调试
