chrome开发者工具功能拾遗:Sources面板篇
本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能。也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工作效率。
直接修改js进行调试
chrome开发者工具中一个比较常用的功能就是在Elements
面板修改css直接看效果,殊不知,原来在Sources
面板中,连js都可以直接修改。
原本我也感到很惊讶,js跟css的差别很大,js是执行完就完事了,哪像css一直都有效的呀,那这修改执行完的js又能有什么作用呢?在查阅相关资料后,发现这功能主要是在设置断点(breakpoint)进行单步调试时用的,步骤如下:
1. 直接给某行js代码设置断点。
2. 刷新页面后,程序就会停在断点设置的那一行上。
3. 然后我们就可以在断点那一行代码的后面添加我们自己的debug代码了,例如下面这样:
4. 按下快捷键Ctrl + s
保存,发现该面板变红了,即表示保存生效:
5. 此时利用快捷键F10
,就能最终看到刚刚添加的debug代码的效果了:
值得注意的是,由于单步调试只能往下走而不能回头,如果要重新测试的话就要刷新页面,但刷新页面会导致刚刚保存的调试代码消失,恢复到线上版本的代码。
在单步调试过程中直接查看变量
在单步调试过程中,我们总免不了看看各个变量当前的值是什么,以此来判断问题是不是出现在当前这一行代码。
查看变量值的方法还是有很多的,下面列举两种常用的:
- 通过
Sources - Watch
面板,在这里设置想要监控的变量,随着单步调试的进行,这些被监控的变量的值也会随之更新。
- 通过console打印变量,除了在代码里写
console.log()
外,其实是可以直接在单步调试的过程中直接用console来打印的,例如下图:
除了上述的这两种方法,还有更简单的方法:在单步调试的过程中,直接把鼠标移到想查看的变量,然后就会弹出个小框把变量的值给显示出来啦:
这是不是非常方便咧?不过这种方法在本质上其实跟上述两种方法是一样的,都有作用域的限制。比如说,上图的那个keywords
变量就是查看不了的,因为代码已经执行到了success
的这个回调函数上了,已经不是在同一个作用域啦。
Snippets(程序小片段)
Snippets提供了在chrome里保存及运行一段js代码的功能,我们可以简单地把snippet当做是笔记,用来搭配直接修改js进行调试
(因为刷新后添加的代码就不见了)来记录下每次调试需要用到的代码;也可以用作写一些小demo来试函数、api等功能。
chrome开发者工具功能拾遗:Sources面板篇相关推荐
- 浏览器原理 20 # Chrome开发者工具:利用网络面板做性能分析
说明 浏览器工作原理与实践专栏学习笔记 DevTools Chrome 开发者工具(简称 DevTools)是一组网页制作和调试的工具,内嵌于 Google Chrome 浏览器中.它提供了通过界面访 ...
- HTML开发者工具抓取所有图片,利用Chrome开发者工具功能进行网页整页截图的方法...
说起要截取整个网站页面,很多朋友第一时间想到的都是用哪款chrome扩展,确实,我们网站之前也有介绍过一些截图插件比如: 但其实现在不少浏览器都自带截屏功能了.尤其是像chrome如此强大的浏览器,比 ...
- Chrome开发者工具详解-Network面板
面板组成 包括控制器.过滤器.概览.请求列表.概要. 控制器--控制面板的外观与功能. 过滤器--过滤请求列表中显示的资源,按住Command(Mac)或Ctrl(Window/Linux),然后点击 ...
- SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- 使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
Chrome 开发者工具是前端开发工程师工具箱里使用频率最高的工具之一. 本文通过一个具体的例子,给大家分享笔者工作中,是如何通过 Chrome 开发者工具,分析一个网站的实现明细. 下图是 SAP ...
- Chapter One:学习 Chrome 开发者工具
目录 1. Chrome 开发者工具 1.1 Elements 面板 1.2 Console 面板 1.3 Sources 面板 1.4 Network 面板 1.5 Application 面板 2 ...
- Chrome 开发者工具新功能-网络面板新增载荷(Payload)边栏
最近开发发现 Chrome 开发者工具里网络请求参数信息被放到了Payload一栏里,感觉可以,查找信息更方便了些 官方新功能介绍文档: https://developer.chrome.com/zh ...
- Chrome开发者工具详解(2)-Network面板
注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板. ...
- [转帖]前端-chromeF12 谷歌开发者工具详解 Sources篇
前端-chromeF12 谷歌开发者工具详解 Sources篇 原贴地址:https://blog.csdn.net/qq_39892932/article/details/82498748 cons ...
最新文章
- @AI开发者:薅资源,赢大奖,零成本体验AI开发,这场大赛等你来战!
- lwip iperf 方法进行性能测试
- input按钮中的onclick事件
- O/R Mapping再乱弹
- 机器视觉:系统中影响图像质量的因素有哪些?
- B. Suffix Structures 模拟吧,情况比较多要想周全
- [Android/Icon] 分享一个图标/Icon制作网站
- easyui基本布局
- SAP那些事-生产订单结算规则修改
- 新浪微博开放平台站内应用开发流程直播(一)
- 区块链中的节点是什么意思?
- Mac电脑如何转化二维码?方法了来了
- 有哪些比较好的企业内部管理软件?公认的5个高效管理软件介绍
- 2021年全球开关收入大约4944.1百万美元,预计2028年达到6146.3百万美元
- 区块链需要学习哪些东西_学习区块链需要什么基础?小白必看
- 扬长避短,做自己最擅长的事情
- AI(Adobe Illustrator)中的选择工具和直接选择工具有什么区别?
- c++Primer5,总览与IO库和泛型算法
- 电脑开启热点,但是连接时候显示无intent或无IP分配
- 观智能化浪潮如何改变产业链创新
热门文章
- SharePoint2013 Online中InfoPath 无法调用WebService
- 服务器响应200和304含义
- TFS2012 用户重复无法添加到组问题解决方法
- VirtualBox6.0中CentOS7.6 网络配置
- 大尺寸3D打印机:不再是“围城”!工业级3D打印的瞬发时代已来!
- android 图片二维码识别和保存(二)
- 在Oracle中IMP导入数据时,如何解决目标数据库字符不一致问题
- XMind安装/注册完整教程
- [转载]TFS与Project、Excel同步
- 使用json-lib实现json to javabean