前端代码调试:多种方式调试JS
只做一个简单的Js调试案例,工具准备:1.WebStorm(等任意编辑器都可以) 2.Google Chrome
✿以Debug方式启动
准备工作
第一步:创建一个HTML,写入js脚本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS DEBUG</title>
</head>
<body>
<h1>JS DEBUG</h1>
<script>
let fn = function (x) {
let num = 2;
return num + x;
};
fn(2);
</script>
</body>
</html>
第二步:下断点
1)可以单击左侧边栏生成红点
2)也可以在开始调试位置输入断点标识:debugger;
<script>
let fn = function (x) {
debugger;//断点标识 也可以直接点击左侧边栏生成红点
let num = 2;
return num + x;
};
fn(2);
</script>
Debug启动
此时会弹出该网页,不过此时是无法通过右键检查进入网页调试页面,右键此时已被禁用。
好了!现在其实有两种调试平台可用:
①WebStorm的调试工具
切换到Debugger tab栏操作即可
②浏览器的调试工具
此时无法对该页面右键操作。
首先需要停止debug状态,可以在网页上停止,当然也可以在WebStorm里停止。
然后在该测试网页右键检查进入Sources选项卡
最后,重新启动Debug模式即可
普通启动
有些编辑器是没有debug功能,或者你想直接打开html进行启动,只要借助一下谷歌浏览器即可!
let fn = function (x) {
let num = 2;
return num + x;
};
fn(2);
打开页面,进入谷歌控制台并选择Sources选项卡
此时,需要重新加载一次页面方可进入调试模式