前端js代码调试
前端代码调试：多种方式调试JS只做一个简单的Js调试案例，工具准备：1.WebStorm（等任意编辑器都可以） 2.Google Chrome第一步：创建一个HTML，写入js脚本<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JS DEBUG</t
·
前端代码调试：多种方式调试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选项卡
此时，需要重新加载一次页面方可进入调试模式
一站式 AI 云服务平台
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)