前端工程师生产环境 debugger 技巧

大家好,我是若川。持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列

导言

开发环境 debug 是每个程序员上岗的必备技能。生产环境呢?虽然生产环境 debug 是一件非常不优雅的行为,但是由于种种原因,我们又不得不这么干。

那我们今天讲一讲如何使用 chrome 在生产环境进行 debug 。

b4302cd518f4d2fa87de40ced6910747.png

生产环境 debug 步骤

生产环境 debug 需要几步?这问题和“把大象装进冰箱拢共分几步”一样简单。

第一步,把冰箱门打开。F12 打开 devTools;

第二步,把大象装进冰箱。找到需要 debug 的前端文件,格式化,打断点,调试上下文,定位问题;

第三步,关闭冰箱门。解决问题。

如何快速定位错误是前端还是后端接口返回的?

在把大象装进冰箱之前,先初步判断下,是否真的需要由你将大象装进冰箱。

首先我们需要判断,错误是前端还是后端报的,那么如何快速判断?

方案一:根据对代码的实现的了解,判断报错属于前端还是后端。

这个方案前提是需要你对代码实现很熟悉,也是最简单的方式。

方案二:前端代码全局搜索关键字,工程代码里搜索/控制台打开搜索。

对应工程 gitlab 或者 vscode 或者 devTools global search 里去进行全局搜索。

方案三:翻阅 network 面板中的请求。

翻阅 network 面板中的请求,看下返回的 response 是否携带错误提示,有则表示后端返回的;如果报错的接口刚好是以非200 的状态返回,或者是由新的操作触发调用接口,我们很快就能查找到对应的接口,如下:

b6eb41c3dbe4d49e4518b3ef045ecbf3.png

方案四:使用 network search 进行搜索。

但是很多情况,接口业务错误会以 http status  200 的状态码返回,如果此时请求了大量的接口(举个例子:进入页面调用了大量的接口,其中有一个接口返回了错误信息),那么除了逐个翻阅 network 这种低效的方式,chrome devTools 还提供了 network search 面板这种更便捷的方式,可以搜索接口详细信息(包括详细的返回信息),返回匹配结果。

如何打开 network search 面板?

在 network 面板中,按快捷键  ⌘ + F(Mac)、 CTRL + F(Windows)可呼出 network search 面板。

1e97bf9f9e8fd2693d251bba4278d22f.png

如果确定需要你把大象装进冰箱,那把大象装进冰箱的技巧有哪些?

如何快速定位到问题相关的代码

global search ,全局搜素关键字,再定位到关键的代码

chrome devTools 的 global search 是一个非常实用的一个功能,当你不知道需要调试的代码在哪个文件时,当你是一个非常大的系统,引用了很多的资源文件,你可以使用 global search 进行搜索关键字,这个操作会搜索所有加载进来的资源,点击搜索结果,就可以使用 source 面板打开对应的资源文件,然后格式化代码,再然后在当前的文件内 再次搜索关键字,打断点。

打开 global search 快捷键:

⌘ + ⌥ + F (Mac),CTRL + SHIFT + F (Windows)

看下图例子,我们随便找个页面根据提示搜索代码:

860c8da0f3f26d78e0f3070ad8302080.png

可以尝试使用哪些关键字进行搜索:

(1) 页面存在明确的报错信息,且已经明确该错误文案是写在前端代码中错误信息文案。提示信息在 coding 过程中一般是使用 字符串,压缩混淆过程中一般是不会进行处理的,会保留原文,当然代码打包构建过程中,对代码压缩混淆也可以选择对中文进行 unicode 转码,此时如果关键字是中文,就需要先转码再搜索了。

(2) 已知相关代码中存在的编译混淆后依然还保留的的关键代码,会向外暴露的方法名;

如何 debug 混淆后的 js ?

生产环境的 js 基本上都是混淆过的(点击了解前端代码的压缩混淆 (https://todo.com/)),压缩混淆的优点就不赘述了,压缩混淆后随之来的是生产环境调试的难度,虽然通过打断点,勉强还能看的懂,但是已经很反人类了。

我们用一个最简单的 demo ,对比一下代码生产环境构建编译前后的差距。

这里选择用 vue-cli 创建了一个最简单的 demo ,看下源代码和编译后的代码。

源代码:

c4f1061da70946153182cc67a9bffdee.png

构建编译后的代码(此处关闭了 sourceMap ):

8c985d66f0f8d49e51c44b7972fa5f5c.png

这里我们看到构建编译后的代码做了压缩混淆,出现了出现了大量大的 abcd 替换了原有的函数方法名、变量名,编译后的代码已经不是能通过单纯的读代码码能读懂的了。但是我们通过 debug ,大概还是能看得懂。

9a34aa388938a26003c07534877caf49.png

那么有没有方式使用本地的 sourceMap 调试生产环境的代码?答案当然是有的。

a597ab3e575b795820433e325efd41be.png

如何在生产环境使用本地 sourceMap 调试?

第一步:打开混淆代码

第二步:右键 -> 选择【Add source map】

第三步:输入本地 sourceMap 的地址(此处需要启用一个静态资源服务,可以使用 http-server (https://www.npmjs.com/package/http-server)),完成。本地代码执行构建命令,注意需要打开 sourceMap 配置,编译产生出构建后的代码,此时构建后的结果会包含 sourceMap 文件。

5b63d00b4324e934dde1adccebca30e1.pngc333ca68ea5fc777676c965224756ff6.png

关联上 sourceMap 后,我们就可以看到 sources -> page 面板上的变化了

eb775434c34ce2e1201f18655e13420d.png

如何在 chrome 中修改代码并调试?

开发环境中,我们可以直接在 IDE 中修改代码,代码的变更就直接更新到了浏览器中了。那么生产环境,我们可以直接在 chrome  中修改代码,然后立马看代码修改后的效果吗?

当然,你想要的 chrome devTools 都有。chrome devTools 提供了 local overrides 能力。

local overrides 如何工作的?

指定修改后的文件的本地保存目录,当修改完代码保存的时候,就会将修改后的文件保存到你指定的目录目录下,当再次加载页面的时候,对应的文件不再读取网络上的文件,而是读取存储在本地修改过的文件。

local overrides 如何使用?

首先,打开 sources 下的 overrides 面板;

然后,点击【select folder overrides】选择修改后的文件存储地址;

再然后,点击顶部的授权,确认同意;

最后,我们就可以打开文件修改,修改完成后保存,重新刷新页面后,修改后的代码就被执行到了。

⚠️注意,原js文件直接 format 是无法修改的;在代码 format 之前先添加无效代码进行代码变更进行保存,然后再 format 就可以修改;

606282474af26a020080f25ab08b33ae.png

总结

chrome 调试技巧远远当然不只这些,以上只是生产环境 debug 的小技巧,祝愿大家用不到,最好的 bug 处理方式当然是事前,在上线前得到就解决;如果真的发生问题,如果做好监控和日志,在问题发生的第一时间发现并解决。

参考文献

  • https://developer.chrome.com/docs/devtools/

7ecf0f006349f8058fcad3b29c1ae01e.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经坚持写了8年,点击查看年度总结。
同时,最近组织了源码共读活动,帮助3000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。

903f4ef53c82444757cb5915ed773b4c.png

扫码加我微信 ruochuan02、拉你进源码共读

今日话题

略。分享、收藏、点赞、在看我的文章就是对我最大的支持~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274796.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

figma设计_Figma与Adobe XD:我们如何选择下一个设计工具

figma设计The time came for changes and our design team started raising the topic again about how we should consider moving away from Sketch. This is not the first time this question came to mind, but this time seems like it was serious. Last summer we cons…

一个小厂前端 Leader 如何筛选候选人?

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列本文作…

figma设计_如何在Figma中构建设计入门套件(第1部分)

figma设计Figma教程 (Figma Tutorial) Do you like staring at a blank canvas every time you start a new project in Figma?每次在Figma中启动新项目时,您是否喜欢盯着一块空白的画布? I’m guessing you’re not a big fan right, but it’s a pra…

纯靠技术,很难进入大厂了。。。

日前,国务院印发《“十四五”时期就业促进规划的通知》,其中明确指出,要完善终身学习体系,推进高水平大学开放教育资源,畅通在职人员继续教育与终身学习通道。为响应国家政策,现临时扩大招生规模&#xff0…

十天学会ASP.Net——(8)

1. ajax入门AJAX Extensions工具箱 (1)实现又刷新改变字体大小和无刷新改变字体大小 页面设计: 前台页面设计: 首先需要在用到ajaxExtensions控件的位置之前放置一个ScriptManager控件,它将在浏览页面时不可见&#xf…

聊聊 computed 影响性能的场景

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列前言在…

saej1929_(1929年-2020年)

saej1929Milton Glaser, the legendary graphic designer who co-founded New York Magazine, created the iconic ‘I ❤ NY’ logo, the psychedelic Bob Dylan poster, and the Brooklyn Brewery logo, passed away yesterday at the age of 91 on his birthday, June 26, 2…

Chap2-构造函数语意学

如果一个类没有任何constructor,那么会有一个default constructor被隐式的声明出来,一个implicit default constructor将是一个trivial(无用的)constructor。但是在某些情况下,implicit default constructor将是一个no…

【热点】React18正式版发布,未来发展趋势是?

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列2022年…

不要重新发明轮子_是否重新发明轮子

不要重新发明轮子Design is a profession that thrives on creativity. Us designers are constantly trying to innovate by thinking outside the box. We’ve seen design evolve across all sectors — print, digital, product, architecture etc. We have gone from type…

点击页面元素,这个Vite插件竟然帮我打开了Vue组件文件!超级好用!

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列前言这…

shields 徽标_符号,标志,文字标记:徽标类型的综合指南

shields 徽标Designers and non-designers alike struggle with common terminology when talking about brand marks, often using different terms interchangeably. When it comes to clarifying definitions, sometimes even the most seasoned professionals get confused…

React 18 带给我们的惊喜

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列这篇文…

建模心法(2)——迈出建模第一步

原文地址:http://www.cnblogs.com/1-2-3/archive/2008/08/04/model-method-part1.html 原文作者:景春雷 一错再错的这故事才精彩 ——朴树 《我爱你再见》摘要 即使读了再多的书、跟过再多的项目,…

Web:你知道我这十几年是怎么过来的吗?!

大家好,我是若川。持续组织了8个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列1989 …

设计师更高效_如何丢掉我的工作使我成为一名更好的设计师

设计师更高效I lost my job a few times early on in my design career. In the process of getting back up after a job loss, it has made me a better designer not only in terms of hard skills but the soft skills required to be more resilient and empathetic, whic…

【ASP.NET】登陆成功后如何跳转到上一个页面

当用户浏览网页的时候会在某个地方需要用户登陆才能继续浏览,用户登陆之后会自动跳转到刚刚浏览的页面。这个步骤是怎么实现的呢?net小伙在查阅相关资料实践之后终于明白了,其实很简单,先分享给大家吧。 当用户在浏览一个页面的时…

4月,诚邀你参加源码共读,学会看源码,打开新世界!开阔视野

大家好,我是若川。很多关注我的新朋友可能不知道我组织了源码共读活动~也有很多人不知道我是谁。有人以为我是80后。有人以为我是全职自媒体等等。若川的 2021 年度总结,弹指之间 这篇文章写了我是16年毕业的,或许有些启发。源码共读按照从易…

bt709和srgb_选择用于多用途视频编辑和色彩校正的显示器— sRGB,DCI-P3,REC 709

bt709和srgb**Note from the author: if you enjoy this article, please follow me or this publication for more video production and marketing related content.****作者注:如果您喜欢本文,请关注我或此出版物以获取更多与视频制作和营销相关的内容…

超4000人参加源码共读,喊你来一起学习成长~打开新世界

大家好,我是若川。很多关注我的新朋友可能不知道我组织了源码共读活动~也有很多人不知道我是谁。有人以为我是80后。有人以为我是全职自媒体等等。若川的 2021 年度总结,弹指之间 这篇文章写了我是16年毕业的,或许有些启发。源码共读按照从易…