一秒钟让你的调用栈简洁清晰

194 阅读1分钟

chrome 调试时,经常需要打断点。但是当项目在 React 时,需要涉及到 React 渲染逻辑,所以调用栈经常会进入到 react 内部,会出现类似下图的调用栈信息

截屏2024-12-03 21.30.04.png

在调试业务信息的时候,实际不太关注 React 源码运行的相关信息。这个时候有一招可以轻松屏蔽部门文件下的调用栈信息:在函数名上右击,会出现下面的菜单,然后选择“Add script to ignore list”

截屏2024-12-03 21.35.53.png

然后调用栈就会变成这样

截屏2024-12-03 21.39.04.png

都是你应用内的函数调用了。

Chrome DevTool -> 右上角的⚙️ -> Ignore List 可以查看到所有你忽略的路径信息。支持编辑、删除。

截屏2024-12-03 21.41.50.png

最近调试一直被这个所困扰,需要在一大堆调用栈中寻找有用的信息,之前竟然没有发现这么有用的配置,需要反思。 验证了最近跟艾力老师学到一句话,“Every diffculty slurred over will be a ghost to disturb your repose later on”.