HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

如何用浏览器调试器代替 console.log() ?

  • 2018-11-13
  • 本文字数:2407 字

    阅读完需:约 8 分钟

如何用浏览器调试器代替console.log() ?

对于初级开发人员来说,代码调试是一个不小的挑战。本文通过案例实战介绍使用浏览器自带的调试工具替代 console.log()打印来定位 bug 的方法。


自从成为一名开发人员,我遇到了很多的困难。对于一名初级开发人员来说,最常见的一个挑战就是代码调试。最开始,当我发现可以在 chrome 的控制台中通过 console.log()打印值来定位 bug 的时候,我以为我找到了代码调试的圣杯,结果却证明这种方法非常低效。以下是一些经典的案例供大家调侃:


console.log(‘Total Price:’, total) //确认该值是否已储存


console.log(‘Here’) //确认某个函数是否执行


我想大部分开发人员应该已经意识到这并不是最理想的调试方法,肯定有更好的方法。


非常令人开心的是,浏览器自带的调试工具就是一个更好的方法。以下将以 Chrome 开发者工具为例具体分析。


在这篇文章中,我将会介绍如何打断点,单步执行代码,监听表达式以及在 Chrome 开发者工具中修改代码。


为了更好的理解这篇文章,您需要使用以下案例所需要的代码块,点击这里

第一步:重现 bug

首先需要做的是重现 bug:


1.示例是一个简单的小费计算器。如果您还没有打开


示例代码,请点击这里


2.在 Entree 1 框中输入 12


3.在 Entree 2 框中输入 8


4.在 Entree 3 框中输入 10


5.在 Tax 框中输入 10


6.选择 20%的小费比值


7.点击 Calculate Bill 按钮。计算后的值应为 39.6,但是我们得到的结果却是 14105.09,两个值相差非常的大!


第二步:学会使用 Sources 面板

为了能够在 Chrome 中调试这个案例,您必须习惯使用它的开发者工具栏。Mac 系统同时按住 Command+Option+I 按钮,Linux 系统同时按住 Control+Shift+I 即可打开 Chrome 浏览器的开发者工具。



点击顶部的 Sources 面板之后,下面会出现三个调试面板。从左往右依次是文件导航器,源代码编辑器以及调试窗口。在开始第三步之前,您可以点击熟悉下它们。

第三步:设置第一个断点

在向您展示如何设置第一个断点之前,我先通过 console.log()打印来演示下我要表达的意思。很明显,这个程序在执行的时候进行了计算操作。我们可以通过以下操作来调试程序。



幸运的是,在浏览器的开发者工具中,我们只需要简单的设置一个断点,然后逐步执行代码,就可以直接在浏览器中看到每一步的值,再也不需要执行上面那些繁琐的操作。


浏览器会找到我们所设置的断点,当代码执行到断点处的时候,浏览器会暂停代码的执行,这样您就可以自行调试了。接下来我们来说说如何设置断点。


在上述案例中,我们会在执行最开始的时候,通过设置鼠标事件来设置断点。


在调试窗口中展开“Event Listener Breakpoints”,在下拉框里面展开“Mouse”,然后勾选”click”按钮。


现在,当你点击 Calculate Bill 按钮的时候,调试器将在第一个函数”onClick()”的第一行代码暂停。如果 bug 不在这里,点击工具栏的播放按钮即可跳过这次暂停。


##第四步:逐步执行代码


在所有的调试工具中,开发者都有两种方式来执行代码。我们既可以“进入”,也可以“跳过”后面的一个函数调用。


选择“进入”,浏览器将会逐步执行函数内的每一行代码。



进入下一个函数


选择“跳过”,浏览器将会跳过整个函数,但是这并不影响函数的执行。



跳过下一个函数


以下是单步执行代码的示例。可以看到前三个 Entree 框的值显示在右侧的 Scope 窗口中。


第五步:设置代码行断点

浏览器逐步执行代码的能力非常炫酷,对吧?但是您是否觉得有点麻烦?通常来说,我们只想要知道特定的值。想要解决这个麻烦,我们可以设置代码行断点。


作者备注:正是代码行断点方法让我抛弃了 console.log()方法,并从此爱上了 Chrome 开发者工具。


设置代码行断点,只需要点击您想要查看更多信息的代码行数字编号即可。然后像往常一样运行代码,浏览器会自动在你设置断点的那一行暂停执行,而不需要逐步执行每一个函数。


注意:如果遇到了问题,请先检查是否取消选中了鼠标下的单击复选框。



如您所见,3 个数据小计之后的值显示为”10812”。我输入的值在右边的 Scope 窗口中显示,同时代码行中也有相应的提示。


嗯…我想我应该已经知道问题出现在哪里了,有可能是字符串拼接导致的问题。


接下来,让我们监听表达式来验证我的想法。

第六步:监听表达式

我们现在已经知道三个输入框的值并没有正确相加,那么让我们监听下这三个值。


监听表达式会提供有关代码中任何给定变量或表达式的更多信息。


如何“监听”特定的值?点击顶部 Watch 面板,面板展开后再点击右边的加号,然后就可以输入您想要监听的变量名称或者是表达式名称了。


以上示例中,我们需要监听第一个 Entree 框的值,以及值的类型。



啊!我想我终于找到了问题所在。第一个输入框的值存储的是字符串类型!问题似乎发生在获取输入框值的时候,或许,querySelector()方法才是罪魁祸首,另外的两个值也应该受到这个方法的影响了。接下来我们将进一步调试,然后在开发者工具栏中修改我们的代码。

第七步:修改代码

经过进一步的了解,问题确实出在 querySelector()方法上!



那么我们如何解决这个问题呢?如 74 行代码所示,我们可以简单地使用像 Number(getEntree1())这样的方法将获取到的字符串强制转换为数值。


想要修改代码,您需要打开”sources”左边的”elements”面板。如果没有看到 javascript 代码,打开 script 标签即可。然后在面板上右键选择”edit as html”,就可以开始修改了。



如果您使用的是工作区,就可以轻松地保存并立即查看更新的代码。如果不是,您将需要使用 command + s(mac)或者 control+s(linux)命令保存网页的本地副本。


然后,您可以打开本地副本查看更新了。



搞定!


本文中的调试方法灵感来自于 Kayce Basques 的文章”在 Chrome 开发者工具中开启调试 Javascript”,该方法已被 developers.google.com 所采用。


演示代码: https://github.com/paragzaveri/chromeDevTools


英文原文:https://medium.com/datadriveninvestor/stopping-using-console-log-and-start-using-your-browsers-debugger-62bc893d93ff


2018-11-13 14:282368

评论 4 条评论

发布
用户头像
还是console.log()比较快速
2018-11-20 09:48
回复
用户头像
这个面对现在的 webpack 友好吗
2018-11-14 15:35
回复
别担心,有sourcemap
2018-11-28 21:15
回复
用户头像
真是好文章啊
2018-11-13 18:10
回复
没有更多了
发现更多内容

教你处理数仓慢SQL常见定位问题

华为云开发者联盟

数据库 后端 华为云 企业号十月 PK 榜

如何提升研发效能?我们先从指标谈起

Kyligence

数据分析 指标管理

阿里云云边一体容器架构创新论文被云计算顶会 ACM SoCC 录用

阿里巴巴云原生

阿里云 云原生 容器服务

华为数通HCIA小型拓扑综合实验,运用OSPF动态路由协议、ACL访问控制列表,交换机生成树协议,修改交换机根桥、交换机划分vlan、链路聚合等相关数通技术、NAT地址转换以及NAT网络地址转换的配置

Python-派大星

10月月更

ACL访问控制列表 基础、创建ACL访问控制列表的两种方式、配置ACL访问控制列表规则、修改ACL规则的默认步长。子网掩码、反掩码、通配符掩码的区别和作用。

Python-派大星

10月月更

“程”风破浪的开发者|学习中的境界

林冲

学习方法 “程”风破浪的开发者

极客时间运维进阶训练营第二周作业

9527

推广TrustAI可信分析:通过提升数据质量来增强在ERNIE模型下性能

汀丶人工智能

nlp

27位技术实战派负责人齐聚 深聊降本增效 你一定不想错过!

阿里技术

云计算 云原生 云栖大会 降本增效

订单中心架构设计与实践

小小怪下士

Java 程序员 系统架构 架构设计

报名倒计时1天!平头哥、中科院软件所PLCT实验室等技术专家解读最新RISC-V技术

OpenAnolis小助手

报名 risc-v 云栖大会 Workshop 龙蜥峰会

从“汽车制造”生活案例到软件的建造者模式

宇宙之一粟

设计模式 建造者模式 Go 语言 10月月更

Spark on k8s在阿里云EMR的优化实践

阿里云大数据AI技术

大数据 spark 企业号十月PK榜

vue3 name 属性的使用技巧

new_cheng

Vue 前端 Vue3 VUE 3.0 源码

2022最新CSS高频面试题指南

CoderBin

CSS 前端 面试题 秋招 10月月更

如何在C#或VB.NET程序中为幻灯片添加或删除批注

Geek_249eec

C# PPT VB.NET

JUC 浅析(三)

Andy

Spark On Kubernetes 的 Web UI 访问实践

移动云大数据

FlyFish一周年,社区大咖邀你共话开源!

云智慧AIOps社区

低代码 可视化 数据可视化 大屏可视化 无代码

对话创始人:团队研发效能应该如何管理和度量?

LigaAI

团队管理 敏捷开发 研发管理 研发效能 企业号十月PK榜

AR人体姿态识别,实现无边界的人机交互

HarmonyOS SDK

AR

36氪|元年科技发布新版数字化PaaS平台,更新多个组件

元年技术洞察

方舟 PaaS 中台战略 企业数字化

手把手教你从安装CentOS7.4镜像开始,搭建IoT视频监控系统

华为云开发者联盟

后端 开发 华为云 企业号十月 PK 榜

NAT基础:NAT技术原理,静态NAT、动态NAT、NAPT、Easy IP、NAT Server的原理,以及各NAT的配置方法和转换示例。

Python-派大星

10月月更

从清华大学到苏州经贸,双一流和普通高校都在使用的数据科学教学实训平台

ModelWhale

大数据 人才培养 数据竞赛 实训 教学

极客时间运维进阶训练营第二周作业

忙着长大#

极客时间

专访韩向东|元年科技:专业与技术并重,赋能财务数字化转型

元年技术洞察

数字化转型 财务数字化

数字化时代,企业如何创新自己的客户服务

Baklib

要努力,但也别焦虑

源字节1号

程序人生

String源码分析(二)

知识浅谈

String类 10月月更

京东云开发者|京东云RDS数据迁移常见场景攻略

京东科技开发者

MySQL 数据同步 数据迁移 云迁移 数据订阅

如何用浏览器调试器代替console.log() ?_大前端_Parag Zaveri_InfoQ精选文章