asp js单步调试_如何使用Chrome的控制台高效的调试Javascript代码?
引言
在我们的日常开发中我们常常会遇到JavaScript的调试问题,而我们解决问题的传统解决方案就是使用大量的console.log或者console对象的其他方法,这会给我们带来很多不便,特别是遇到复杂问题的时候,可能会出现大量的console.log,当排查出问题之后我们又不得不在回头清除掉这些调试信息,这样大大降低了我们的工作效率。所以,我们有必要寻找更好的方案来解决JavaScript的调试问题,无疑,Chrome的调试工具Chrome DevTools给我们带来了调试的遍历,下面我们一步步来学习一遍在DevTools中调试的基本工作流程!
第一步:明确我们需要调试的位置
我们通过一节简单的案例来模拟一下,本案例来源于官网的调试Demo,其中index.html代码如下
然后是index.js
代码的本意是要做一个简单的加法,但是我们运行看下结果:
显然执行结果是错误的,结果应该是33,我们假设这就是我们在开发中遇到的问题
第二步:打开Chrome的调试面板
- Command+Option+I (Mac) 或 Control+Shift+I(Windows、Linux)或者F12
- 点击Source标签,Source有三块面板
从左依次是
- File Navigator 窗格。 此处列出页面请求的每个文件。
- Code Editor 窗格。 在 File Navigator 窗格中选择文件后,此处会显示该文件的内容。
- JavaScript Debugging 窗格。 检查页面 JavaScript 的各种工具。 如果 DevTools 窗口布局较宽,此窗格会显示在 Code Editor 窗格右侧。
- 使用断点暂停代码
通常我们会在这写console.log,打完断点我们在填入两个数字提交
我们的代码在断点处暂停了,很直观的能看到我们需要看的变量值,简单来说就是断点可以快速方便的查看你想看的值,有时候我想单步调试代码,直接F10就行了,想进入到函数中按F11,我们调试到这和我们猜想的一样,由于是字符串那么+号就意味着连接,也就造成了错误的结果。
- 使用控制台直接求值
我认为这是最值得赞一波的功能,因为我们可以直接在控制台输入变量或者表达式或者执行一个函数,我们打开console标签,输入以下内容,前提是我们在之前那个地方打了断点
我们可以执行我们需要执行的函数和表达式,然后也正确的看到了结果,知道的人可能觉得没什么,但是不知道的人可能觉得这个功能非常Nice,或者你可以直接修改代码保存后在执行,同样知道了结果,而不必再到编辑器修改,调试正确后直接复制过去即可
总结
本文就是想通过简单的案例介绍来改变下我们传统的js调试方式,目的就是为了提升工作效率,当然也有很多其它方式调试javascript,比如WebStorm,VSCode安装Debug for Chrome,只是我觉得这种方式最直接,同时也最简单,虽然是小技巧,但是也得知道不是,希望对大家能够有所帮助!
asp js单步调试_如何使用Chrome的控制台高效的调试Javascript代码?相关推荐
- xcode 中无法进行虚拟机调试_在软件部署中使用 strace 进行调试
我最喜欢的用来解决"为什么这个软件无法在这台机器上运行?"这类问题的工具就是 strace. -- Simon Arneaud(作者) 我的大部分工作都涉及到部署软件系统,这意味着 ...
- 电脑强制打开手机usb调试_如何设置安卓手机各版本USB调试模式
在这篇教学中,小蛙会详细向大家讲解USB调试模式的开启及关闭方法,以及其用途. 在这个过程中,由于Android 机型众多,所以无办法列举太多.但请相信小蛙,开启USB 调试的操作方法基本上是一样的, ...
- vs java调试_基于VSCode的Java编程语言的构建调试环境搭建指南(作业三)
1.Java编译环境的搭建(CodeRunner) CodeRunner的强大之处在于它支持许多语言,只要选好语言,就直接可以写代码,即开即用的模式.时至今日,Code Runner已经有了超过400 ...
- mysql 查询调试_使用MySQL慢速查询日志进行调试
注意:这是为mysql版本5.5编写的,旧mysql版本的语法略有不同. 启用slow-query-log 可以通过在/etc/mysql/my.cnf中取消注释以下行来启用慢日志,slow-quer ...
- 谷歌浏览器修复_谷歌发布 Chrome 紧急补丁 修复可执行任意代码的高危漏洞
稿源:http://cnBeta.COM 面向 Chrome 用户,谷歌今天发布了一项紧急安全更新,修复了可以执行任意代码的漏洞.谷歌正向 Windows.macOS 和 GNU/Linux 平台上的 ...
- python 执行js打开链接_使用Python在链接的href中执行JavaScript
javascript:打开窗口交付("http://bibliotecadigitalhispanica.bne.es:80/webclient/DeliveryManager?applic ...
- vscode 调试参数_如何通过vscode运行调试javascript代码
初次正式要写 javascript 相关的代码,想要用 vscode 直接编译 js 代码,但是发现没有那么简单,需要配置好 launch.json 文件,现已经在vscode上编译过去并且可以调试 ...
- f12弹出debug_调试Javascript代码(浏览器F12及VS中debugger关键字)
目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法以后,Chrome和Firefox中的调试 ...
- 只会用console.log调试?快来试试这些高效的调试方法
别光知道用console.log调试了,快来试试这些高效的调试方法! 作为一名前端开发人员,你一定经常是用 console.log 来进行开发调试,这当然没什么问题,但你可能不知道,除了 consol ...
最新文章
- [深度学习] PyTorch-BigGraph 使用
- springmvc在启动工程的时候就访问数据库,加载一些共同的数据
- 关于java AudioInputStream播放短音频没声音的问题
- SAP License:你适合做SAP顾问吗?
- maven(11)-聚合多模块
- 重定向和请求转发后面加“return;”语句
- XISE-WBMS管理V30.0最新无后门过狗过WAF版
- 华为的人力资源管理揭秘
- Oracle数字转汉字过程,oracle中如何将字符和数字转成中文
- M70003中型Android平板电脑亦称IPED 13价格ipad的
- BugKu -- AWD --S1排位赛-4
- 田蕴章书法讲座《每日一题,每日一字》(2) 文字整理 ——火字、必字与书法笔顺
- 不用找,你想要的手抄报 小报印刷模板素材都在这里
- vue项目中扫码枪收款
- F5负载均衡技术的学习
- 机器学习入门(二) 准备工作
- java实现本地图片转urljava中映射本地图片地址为url访问
- 微信对话生成器,生成微信聊天记录,聊天记录生成器,制作微信聊天记录,可生成文字、语音、转账、红包,朋友圈装X神器~
- SQL Server 索引基础知识(7)----Indexing for AND(转自蝈蝈俊.net)
- 92-ICMP与ping:投石问路的侦察兵
热门文章
- 机器学习(一) 基于sklearn库的数据集划分(交叉验证)
- 源码 移植_FreeModbus移植总结
- python写界面c这算法_插入算法分别从C,java,python三种语言进行书写
- mysql_query 资源标识符_借助PHP的mysql_query()函数来创建MySQL数据库的教程
- php熊掌号怎么设置json-ld,dedecms织梦系统怎么对接百度熊掌号并添加JSON_LD数据
- tomcat 启动速度慢背后的真相
- 微信小程序小结(3) -- 使用wxParse解析html及多数据循环
- Shell 示例:利用 $RANDOM 产生随机整数
- ASP.NET Zero--5.配置权限
- [deviceone开发]-do_SlideListView的简单示例