草庐IT

放弃 console.log 吧!用 Debugger 你能读懂各种源码

cybozu开发者 2023-07-22 原文

很多同学不知道为什么要用 debugger 来调试,console.log 不行么?

还有,会用 debugger 了,还是有很多代码看不懂,如何调试复杂源码呢?

这篇文章就来讲一下为什么要用这些调试工具:

console.log vs Debugger

相信绝大多数同学使用 console.log 调试的,把想看的变量值打印在控制台。

这样能满足需求,但是遇到对象的打印就不行了。

比如我想看 webpack 源码里的 compilation 对象的值,我打印了一下:

但你会发现对象的值也是对象的时候不会展开,而是打印一个 [Object] [Array] 这种字符串。

更致命的是打印的太长会超过缓冲区的大小,terminal 里会显示不全:

而你用 debugger 来跑,在这里打个断点来看就没这些问题了:

有的同学可能会说,那打印一个简单的值的时候用 console.log 还是很方便呀。

比如这样:

真的么?

那还不如用 logpoint:

 

代码执行到这里就会打印:

而且没有污染代码,用 console.log 的话调试完之后这个 console 不也得删掉么?

但是 logpoint 不用,它就是个断点的设置,不在代码里。

当然,最重要的是 Debugger 调试是可以看到调用栈和作用域的!

首先是调用栈,它就是代码的执行路线。

比如这个 App 的函数组件,你可以看到渲染这个函数组件会经历 workLoop、beginWork、renderWithHooks 这些流程:

你可以点开调用栈的每一帧看下都执行了啥逻辑,用到啥数据。比如可以看到这个函数组件的 fiber 节点:

再就是作用域,点击每一个栈帧就可以看到每个函数的作用域中的变量:

可以看到调用栈来理清出错前都走了哪些代码,可以通过作用域来看到每一个变量的值。

有了这些东西,排查错误不就很轻松了么!

而你用 console.log 呢?

啥也没,只能自己猜。

由于本篇文章都是gif动图,今天上传太累了,要看全文,请点击以下链接:https://cybozudev.kf5.com/hc/community/question/34258651/

有关放弃 console.log 吧!用 Debugger 你能读懂各种源码的更多相关文章

  1. ruby - 是否有用于序列化和反序列化各种格式的对象层次结构的模式? - 2

    给定一个复杂的对象层次结构,幸运的是它不包含循环引用,我如何实现支持各种格式的序列化?我不是来讨论实际实现的。相反,我正在寻找可能会派上用场的设计模式提示。更准确地说:我正在使用Ruby,我想解析XML和JSON数据以构建复杂的对象层次结构。此外,应该可以将该层次结构序列化为JSON、XML和可能的HTML。我可以为此使用Builder模式吗?在任何提到的情况下,我都有某种结构化数据-无论是在内存中还是文本中-我想用它来构建其他东西。我认为将序列化逻辑与实际业务逻辑分开会很好,这样我以后就可以轻松支持多种XML格式。 最佳答案 我最

  2. UE4 源码阅读:从引擎启动到Receive Begin Play - 2

    一、引擎主循环UE版本:4.27一、引擎主循环的位置:Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑:1、EnginePreInit:加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序:模块加载过程:(1)注册模块中定义的UObject,同时为每个类构造一个类默认对象(CDO,记录类的默认状态,作为模板用于子类实例创建)(2)调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类(UGame

  3. ruby - Heroku production.log 文件位置 - 2

    我想在heroku.com上查看我的应用程序日志的内容,所以我关注了thisexcellentadvice并拥有我所有的日志内容。但是我现在很想知道我的日志文件实际在哪里,因为“log/production.log”似乎是空的:C:\>herokuconsoleRubyconsoleforajpbrevx.heroku.com>>files=Dir.glob("*")=>["public","tmp","spec","Rakefile","doc","config.ru","app","config","lib","README","Gemfile.lock","vendor","sc

  4. sql - 在 Rails Console for PostgreSQL 的表中显示数据 - 2

    我找到了这样的东西:Rails:Howtolistdatabasetables/objectsusingtheRailsconsole?这一行没问题:ActiveRecord::Base.connection.tables并返回所有表但是ActiveRecord::Base.connection.table_structure("users")产生错误:ActiveRecord::Base.connection.table_structure("projects")我认为table_structure不是Postgres方法。如何列出Postgres数据库的Rails控制台中表中的所有

  5. ruby-on-rails - 你能为 Ruby on Rails 推荐好的数据网格类/gem 吗? - 2

    您能为RubyonRails推荐好的数据网格类/gem吗?喜欢http://code.google.com/p/zend-framework-datagrid/采埃孚 最佳答案 你也可以试试datagridgem。这不仅关注带有列的网格,还关注过滤器。classSimpleReportincludeDatagridscopedoUser.includes(:group)endfilter(:category,:enum,:select=>["first","second"])filter(:disabled,:eboolean)fi

  6. elasticsearch源码关于TransportSearchAction【阶段三】 - 2

    1.回顾.TransportServicepublicclassTransportServiceextendsAbstractLifecycleComponentTransportService:方法:1publicfinalTextendsTransportResponse>voidsendRequest(finalTransport.Connectionconnection,finalStringaction,finalTransportRequestrequest,finalTransportRequestOptionsoptions,TransportResponseHandlerT>

  7. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  8. Cesium源码解析一(terrain文件的加载、解析与渲染全过程梳理) - 2

    快速导航(持续更新中…)Cesium源码解析一(terrain文件的加载、解析与渲染全过程梳理)Cesium源码解析二(metadataAvailability的含义)Cesium源码解析三(metadata元数据拓展中行列号的分块规则解析)Cesium源码解析四(Quantized-Mesh(.terrain)格式文件在CesiumJS和UE中加载情况的对比)目录1.前言2.本篇的由来3.terrain文件的加载3.1更新环境3.2更新和执行渲染命令3.3数据优化3.4结束当前帧4.总结1.前言  目前市场上三维比较火的实现方案主要有两种,b/s的方案主要是Cesium,c/s的方案主要是u

  9. ruby-on-rails - "554 Please activate your Mailgun account. Check your inbox or log in to your control panel to resend the activation email."错误 Ruby on Rails - 2

    我正在使用RubyonRails构建网络应用程序。我正在使用Mailgun作为这个应用程序的邮件程序。当我使用Facebook注册时它工作正常但是当我尝试使用电子邮件和密码注册时,我不断收到此错误“554请激活您的Mailgun帐户。检查您的收件箱或登录到您的控制面板以重新发送激活电子邮件。“我已经在mailgun仪表板中将eamil授权给授权收件人。这是我的代码:Registrations_controller.rbclassRegistrationsControllerconfig/environments/development.rbRails.application.confi

  10. ruby - Chromedriver `driver.manage.logs.get(:browser)` 在 chromedriver 75.0.3770.8 上失败 - 2

    在chromedriver75.0.3770.8上访问driver.manage.logs.get(:browser)-它导致错误#(NoMethodError)的未定义方法“日志”在74.0.3729.6上工作正常来自:https://github.com/SeleniumHQ/selenium/issues/7270 最佳答案 在最近的selenium-webdriver(4.4.0)和最近的Chrome(105)中,manage.logs不见了,但这有效:page.driver.browser.logs.get(:browse

随机推荐