点此查看 所有教程、项目、源码导航
本文目录
- 1. 前言
- 2. 打开开发者工具
- 3. 小结
1. 前言
在上一篇中,我们曾经演示过一个错误实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
alert(1)alert(2)
</script>
</body>
</html>
两句代码,由于没使用分号分割,导致浏览器无法识别,所以程序无法正常运行。
这段代码比较简单,我们比较容易分析它的问题。
但是代码如果复杂起来,有成千上万行代码,当其中一句有问题时,我们该如何知道是哪里出了问题,出了什么问题呢?
此时就要借助浏览器自带的开发者工具了,既然浏览器要执行JS代码,所以浏览器肯定知道哪些语句不能正常执行。所以浏览器提供了开发者工具,以便告知开发者的问题。
当然开发者工具的功能远不止如此,我们暂时先学习下开发者工具的控制台功能,开发者工具的控制台,可以查看错误提示信息。
2. 打开开发者工具
在Chrome浏览器或IE浏览器中,都可以直接按【F12】打开开发者工具,如下图是Chrome浏览器的开发者工具控制台:
然后下图是IE浏览器的控制台:
可以看到,两个控制台都给出了错误提示信息,然后也告诉开发者,代码的问题是第10行。
我们VSCode每行代码左边有行号,我们看下,如下是我的VSCode编写代码的截图,第10行正好是有问题的代码位置。
3. 小结
平常我也是经常编写JS代码,习惯性上就是在查看网页JS运行效果时,同步打开开发者工具控制台,查看代码运行情况。
所以建议大家也养成这样的习惯,学会使用开发者工具的控制台,查看代码运行信息。
更多推荐
零基础JavaScript入门教程(6)–JS之使用开发者工具
发布评论