点此查看所有教程、项目、源码导航本文目录1. 前言2. 打开开发者工具3. 小结1. 前言在上一篇中，我们曾经演示过一个错误实例：<!DOCTYPEhtml><html><head><metacharset="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运行效果时，同步打开开发者工具控制台，查看代码运行情况。所以建议大家也养成这样的习惯，学会使用开发者工具的控制台，查看代码运行信息。
点此查看所有教程、项目、源码导航本文目录1. 前言2. 打开开发者工具3. 小结1. 前言在上一篇中，我们曾经演示过一个错误实例：<!DOCTYPEhtml><html><head><metacharset="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运行效果时，同步打开开发者工具控制台，查看代码运行情况。所以建议大家也养成这样的习惯，学会使用开发者工具的控制台，查看代码运行信息。