上一节我们明确说明最好使用VScode进行JS编码,并解释使用VScode编码能够提高编码效率,本节课我们将详细介绍如何使用Chrome浏览器进行调试。一般来说,Web开发人员都会选择Chrome浏览器进行网页开发,原因不言而喻,Chrome内置的开发者工具极其强大和便捷,它提供了实时编辑HTML/CSS、强大的JavaScript调试、网络请求监控和性能分析等一站式功能,让调试和优化网页的效率变得非常高,其下载地址为Chrome浏览器

下面我们详细解释如何使用开发者工具:

1. 如何打开发者工具:(点击F12弹出开发者工具)

Chrome浏览器的开发者工具


2. 如何切换开发者工具位置:

切换开发者工具位置


3. 切换中文模式:

进入设置

开发者模式切换中文


4利用控制台检查JS代码('console.log()'):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>欢迎来到Dotcpp的JavaScript(JS)教程</h1>
</body>
<script>
   console.log('我们可以充分利用控制台来进行JS代码的检测!');
   
</script>
</html>

通过控制台检测JS代码


开发者工具还有很多小技巧,笔者这里就不一一列举了。

总结:熟练运用开发者工具,能够帮助我们更好地调试JS代码。

点赞(220)

C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程,并配有习题和答疑,点击了解:

一点编程也不会写的:零基础C语言学练课程

解决困扰你多年的C语言疑难杂症特性的C语言进阶课程

从零到写出一个爬虫的Python编程课程

只会语法写不出代码?手把手带你写100个编程真题的编程百练课程

信息学奥赛或C++选手的 必学C++课程

蓝桥杯ACM、信息学奥赛的必学课程:算法竞赛课入门课程

手把手讲解近五年真题的蓝桥杯辅导课程

Dotcpp在线编译      (登录可减少运行等待时间)