Google浏览器调试前端代码

2023-09-07 阅读 15 评论 0

摘要：我们在开发web程序时难免要自己编写前端的代码，而前端代码又涉及到很多细节，时不时就会犯下某个小错误，然后特别不好发现错误，使得网页经常显示不出来。此时就体现出调试的重要性。下面我将结合图片为大家讲解如何调试前端代码。首先我先贴出测

我们在开发web程序时难免要自己编写前端的代码，而前端代码又涉及到很多细节，时不时就会犯下某个小错误，然后
特别不好发现错误，使得网页经常显示不出来。此时就体现出调试的重要性。下面我将结合图片为大家讲解如何调试
前端代码。

首先我先贴出测试用的小demo代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端测试</title><script>function fuguo(){var i;for(i=0;i<15;i++)alert(i);document.write("<h1>我干的好事儿！！！</h1>");}</script>
</head>
<body><p id="mydo">
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p><button type="button" onClick="fuguo()">覆盖</button></body>
</html>

然后我们用浏览器打开这个html文件，如下图所示：