零基础JavaScript入门教程(6)–JS之使用开发者工具
点此查看 所有教程、项目、源码导航
本文目录
- 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之使用开发者工具相关推荐
- 零基础JavaScript入门教程(8)–JS之输出语句
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. 弹窗输出 3. 网页内容输出 4. 控制台输出 5. 小结 1. 前言 之前我们只讲过一个JS语句:alert,用于弹窗显示信息.一般这 ...
- 零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
- 零基础JavaScript入门教程(2)–在网页中使用JS
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. 网页中使用JS 3. 小结 1. 前言 上一篇,给大家聊了很多关于JS的事情,大家想必已经迫不及待,想知道如何在网页中使用JS. 本篇就 ...
- 零基础JavaScript入门教程(37)-揭开JS对象的面纱
点此查看 所有教程.项目.源码导航 本文目录 1. 背景 2. 怎么设计JS的对象 3. 揭开JS对象的面纱 4. 小结 1. 背景 之前我们讲了,JS对象其实是现实社会中事物的镜像,它可以表达.描述 ...
- 零基础JavaScript入门(第三天)
一.JavaScript 流程控制-循环 1.循环 循环目的 :实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句 JS 中的循环 在Js 中,主要有三种类型的循 ...
- 零基础Bootstrap入门教程(0)--教程背景与目录
点此查看 所有教程.项目.源码导航 本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景 在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
- 零基础CSS入门教程(1)–初识CSS
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言 学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
- 零基础SSM入门教程(0)--教程背景与目录
点此查看 零基础JavaWeb全栈文章目录及源码下载 1. 背景 本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
- 取得数组下标_《零基础C++入门教程》——(8)搞定二维数组与循环嵌套
一.学习目标 了解二维数组的使用方法 了解循环嵌套的使用方法 目录 预备第一篇,使用软件介绍在这一篇,C++与C使用的软件是一样的,查看这篇即可:<零基础看得懂的C语言入门教程>--(二) ...
最新文章
- ubuntu预装脚本
- OpenCV处理引起光学错觉的图像
- Java并发编程—ThreadLocal用法详解
- 2020盲盒经济洞察报告
- selenium的基本使用
- 为什么c语言2的n次方减一,计算2的N次方........有什么错吗?
- ASP.NET使用ConfigurationSection在Web.Config创建自定义配置节
- 使用redis kv数据库维护kafka主题分区的offset
- spring整合SpringMVC Controller 和 Struts2 Action控制层Bean的默认作用域
- php 修复excel 乱码,php下载excel乱码的解决方法
- python导入鸢尾花数据集_决策树分类鸢尾花数据集python实现
- html判断闰年,javascript怎么判断是否闰年?
- 基于信息熵的新词发现算法
- 教程—— 微信公众号如何接入客服系统
- 有关什么情况下session会失效
- 微信小程序之生成海报保存本地
- 使用Selenium实现微博爬虫:预登录、展开全文、翻页
- 素质、职教、信息化:教育实时互动的新命题
- D. Factorial Divisibility
- VC设置断点无效的各种解决方法