C/C++教程

【九月打卡】第12天 Chrome DevTools开发者工具学习

本文主要是介绍【九月打卡】第12天 Chrome DevTools开发者工具学习,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

第一模块:

课程名称:Chrome DevTools开发者工具调试指南

章节名称:4-1 ~ 4-6 

讲师姓名:宗泽


第二模块:

内容概述:

本章是课程的核心章节,通过学习可以掌握调试页面JavaScript脚本最常用的方法,包括调试Log,断点调试,在源代码中调试等等。


第三模块:

学习心得:

第四章 使用Console调试JavaScript

发现问题--->定位问题--->解决问题

Console面板功能简介:

1.运行JavaScript代码的实时环境

2.查看程序中打印的Log日志

3.断点调试代码Debugging

Console面板,本质上是一个就是一个js代码的实时运行环境,同时也是使用代码与浏览器进行交流的入口。

比如:

在Console面板,调用浏览器的接口:document.cookie 、document.querySelectorAll('xxx')等

在Console面板:

回车:执行js代码

shift+回车:换行

console对象是浏览器提供的一个原生对象,这个对象有20几种方法

eg:

console.log():打印信息

console.warn(): 打印警告信息(黄色的)

console.error(): 打印错误信息(红色的)

一般用在try{}catch{}中的catch中

console.table(): 打印json格式的数据(也就是复杂信息)

eg:

https://img2.sycdn.imooc.com/632494af000152ea06290105.jpg

console.group(): 打印有关联的信息组

eg:

spacer.gifhttps://img4.sycdn.imooc.com/632494bb0001774203690107.jpg

语法格式:

console.group("组名")

console.info("xxx")

console.info("xxx")

console.info("xxx")

......

console.groupEnd("组名")

eg的效果:

https://img1.sycdn.imooc.com/632494c50001d7e506390142.jpg

console  custom 定制样式

eg:

console.log("%c百度2020校园招聘简历提交:http://dwz.cn/XpoFdepe", "color:red"))

效果:

https://img2.sycdn.imooc.com/632494d60001fe0704240036.jpg

%c:样式占位符

Network网络请求错误展示

eg:

https://img3.sycdn.imooc.com/632494e1000199d503800053.jpgspacer.gif

console.assert(): 

eg:console.assert(false, ‘断言失败’) 

效果:

https://img2.sycdn.imooc.com/632494e9000113bf02390056.jpg

console.assert(false, ‘断言失败’)  相当于一个try catch ,因为try的结果是false,所以输出断言失败

console.time():  用于打印一个代码片段的执行时间

eg:

https://img3.sycdn.imooc.com/632494f100018b1301840048.jpg

效果:

spacer.gifhttps://img2.sycdn.imooc.com/632495050001dd4002990029.jpg

所以,格式:

console.time()

代码片段

console.timeEnd()

小计巧:

在Console面板中:

https://img4.sycdn.imooc.com/632495100001ed5508490286.jpg

console.clear(): 清除Console面板中的打印信息


4.3 调试javaScript的基本流程+断点调试

调试的基本流程:

有两种:

1.传统:在源码中写console.log 甚至alert() ,来打印运行时信息

             根据运行时打印的信息来进行调试

2. 新方式:利用Chorm devtools 进行JavaScript断点调试

                 做到:运行时调试变量、修改源代码临时保存调试 

                 方式:在源码写debugger

debugger面板的功能键介绍:

https://img1.sycdn.imooc.com/632495270001183903270041.jpg

https://img1.sycdn.imooc.com/6324952f0001e3fd00460039.jpgspacer.gif:Resume script execution            恢复脚本执行

https://img1.sycdn.imooc.com/632495360001bc6500510030.jpgspacer.gif: Step over next function call         跳过下一个函数的执行

https://img2.sycdn.imooc.com/6324953b0001028800360026.jpgspacer.gif: Step into next function call         跳过下一个函数的执行

https://img1.sycdn.imooc.com/6324953f00017ec700360025.jpgspacer.gif: Step  out of current function           退出当前函数

https://img2.sycdn.imooc.com/632495440001d57800490027.jpgspacer.gif:   单步执行,就是一行一行的执行。注意:这里的“一行一行”就是字面意思的一行一行

spacer.gif

https://img2.sycdn.imooc.com/6324954e0001684104080207.jpg

调用的栈

断点

异步请求的断点

dom断点(有3中情况的断点)

事件监听的断点

Event listener breakpoints 下有众多的“事件集”,每个事件集下又细分了多个具体事件

https://img4.sycdn.imooc.com/632495650001fd3903220546.jpgspacer.gif


我们可以通过“勾选”事件监听的Breakpoints 来做到:触发事件时,来 pause 住代码,也就是进入到“断点”的状态

比较常用的打断点的方式:

https://img2.sycdn.imooc.com/63249571000129c604960084.jpg

既:在有问题的“context”(上下文)处打断点(spacer.gif

查看debuge时,对应作用域的值:

方式一:利用【Event Listener Breakpoints】的功能

方式二:鼠标hover在变量之上

方式三:esc呼出console面板,在console面板下,输入变量名,回车即可看到对应变量的值

打debugger的方式:

方式一:源码中写debugger

方式二:利用spacer.gif的功能

方式三:Sources面板下直接spacer.gif

临时保存Sources面板做出修改的代码:Ctrl+s。这种保存是作用不到在服务器上的“源码”的

4.4 Sources源代码面板介绍:

解说“1”部分

top下面是一个域名(域名是对 ip地址+端口号的一个封装)

域名下面是这个网站(web应用)所有的静态资源,一般分为3个文件夹:

x.html

x.js

x.css

解说“2”部分

spacer.gif

展示对应文件的代码

Ctrl+p :呼出“文件收索框”,可以用于收索文件

Ctrl+Shift +p :呼出浏览器命令集的展示,点击一个命令,就会执行该命令

可以在Sources面板中实时编辑源码,并临时保存。浏览器会实时解析出新的效果

Watch: 具体“观察”某个变量的值


4.5 使用Snippets辅助调试Debugging

Snippets是Sources面板下的一个tap


4.6 使用DevTools作为Text IDE

https://img1.sycdn.imooc.com/632495890001e49705810446.jpgspacer.gif


add folder to workspace :  将文件夹添加到工作区

将文件添加到工作区后,此时就牛逼了! 此时浏览器得DevTools 就相当于一个编辑器了,可以在编辑添加到工作区的文件,而且是作用到文件本身的!


第四模块:

学习截图:

https://img3.sycdn.imooc.com/6324940c0001b2bd08310414.jpg

这篇关于【九月打卡】第12天 Chrome DevTools开发者工具学习的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!