WebStorm debug JS示例_综合

1. 首先要安装WebStrom以及在Chrome浏览器里配置好Live Edit插件。具体步骤参见http://hi.baidu.com/shaw_cd/item/8af86aa0e6c098a029ce9d1e。

2. 运行WebStrom，创建一个web project。

3. 修改index.html文件如下：

<!DOCTYPE html>
<html>
<body><p>JavaScript 能够直接写入 HTML 输出流中：
</p><script>cars=["BMW","Volvo","Saab","Ford"];for (var i=0;i<cars.length;i++){document.write(cars[i] + "<br>");}
</script><p>您只能在 HTML 输出流中使用 <strong>document.write</strong>。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p></body>
</html>

4. 设置断点，选择index.html文件，从右键菜单打开debug。调试界面如下图：

5. Chrome运行结果如下图：