JS开发利器——chrome调试器使用浅析(一)

简介: 看到有些新入门的朋友在为了JS的调试而发愁。所以有了写这么一篇博客的动力,能帮助别人就好。我会慢慢修改,直到看着比较满意为止。1. 要求: 对JavaScript基础有一定掌握,个人认为,在学习了JS基础1-3个月就可以了。

看到有些新入门的朋友在为了JS的调试而发愁。所以有了写这么一篇博客的动力,能帮助别人就好。我会慢慢修改,直到看着比较满意为止。

1. 要求: 对JavaScript基础有一定掌握,个人认为,在学习了JS基础1-3个月就可以了。

2. Chrome下载地址: 建议,在百度之中搜索关键字“Chrome 中文版”,然后随便选择一家下载站即可。目前比较好的是 新浪下载、pconline、还有天空。至于版本,下载最新版即可,再此不多说,版本帝更新换代太快了。

3. Chrome内置了调试器,不像Firefox一样,需要自己搜索下载FireBug插件。 我只能说,Firefox适合高手,我只是个菜鸟。

4. 言归正传,怎么进入调试器呢? 最简单的方法: 打开一个网页,然后在页面之中的某处单击鼠标右键、在弹出的菜单之中选择“审查元素(N)”.即可进入调试器。但是此处进入的是HTML元素文档结构,这个暂时不讲。 不要捉急,在下方弹出框顶部的右边,有一个"Console"。这个就是控制台了。

5. 把光标移到控制台内部,试着输入 window ,也就是标准的JS全局对象,然后回车,看到什么了?下方输出了一行,点击左边的那个歪三角形,将会看到window的属性和方法。没错,这就是标准的调试信息了。

6. 如果你在html页面的JS里面输出 console.dir(window); 结果将会和刚才在控制台的输出是一模一样的。console 代表的是控制台对象,属于环境对象,在chrome和firefox下面存在。常用的方法有: console.info(xxx),和console.dir(xxx);没错,dir就表示列出对象的结构树。而info就是标准输出。

7. 既然可以再控制台得到对象信息,那么,还要console对象干什么呢? 原因是,控制台只可以输出全局变量以及其子对象。也就是说,匿名对象和临时变量在控制台手工是查找不到的。所以,在代码内部,可以通过这两个方法来打印出调试信息。

8. 这种方法被称为 暴力调试。也就是暴力的系统输出。另外的是断点调试,暂时不讲。

9. 在控制台里面输入 console.dir(xxx)也是可以执行的,一般来说,句末没有分号无所谓。

10. 如果要输出多行的文本肿么办? CTRL+ 回车试试,你会有惊喜的。

11. 今天暂时到这里吧,程序员找女朋友不容易,你们懂的。

目录
相关文章
|
19天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
374 1
|
1月前
|
JavaScript 前端开发 NoSQL
深入浅出Node.js后端开发
本文将引导你了解Node.js的基础知识,包括安装、运行环境搭建以及简单的代码示例。通过阅读本文,你将学会如何利用Node.js进行后端开发,并理解异步编程和事件驱动模型的核心概念。文章还将介绍一些实用的库和框架,帮助你快速开始Node.js项目。
55 4
|
23天前
|
JavaScript 前端开发 安全
TypeScript的优势与实践:提升JavaScript开发效率
【10月更文挑战第8天】TypeScript的优势与实践:提升JavaScript开发效率
|
23天前
|
JavaScript 前端开发 IDE
深入理解TypeScript:提升JavaScript开发的利器
【10月更文挑战第8天】 深入理解TypeScript:提升JavaScript开发的利器
27 0
|
5天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
59 9
|
1天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第30天】本文将通过一个Node.js的简单示例,引导你进入Node.js的世界。我们将从基础概念讲起,然后一步步深入到代码实现,最后总结Node.js在后端开发中的优势和应用场景。无论你是前端开发者还是后端新手,这篇文章都将为你打开一扇了解Node.js的大门。
6 2
|
9天前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
47 8
|
7天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
26 5
|
24天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第7天】本文将带你进入Node.js的世界,从基本概念、环境搭建到实际案例,逐步深入探索Node.js在后端开发中的应用。我们将通过一个简单的在线聊天室项目,学习如何利用Node.js进行网络编程和数据处理,让你对Node.js有更全面的认识。
17 3
|
24天前
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
98 2