chrome 调试时,经常需要打断点。但是当项目在 React 时,需要涉及到 React 渲染逻辑,所以调用栈经常会进入到 react 内部,会出现类似下图的调用栈信息
在调试业务信息的时候,实际不太关注 React 源码运行的相关信息。这个时候有一招可以轻松屏蔽部门文件下的调用栈信息:在函数名上右击,会出现下面的菜单,然后选择“Add script to ignore list”
然后调用栈就会变成这样
都是你应用内的函数调用了。
在 Chrome DevTool -> 右上角的⚙️ -> Ignore List 可以查看到所有你忽略的路径信息。支持编辑、删除。
最近调试一直被这个所困扰,需要在一大堆调用栈中寻找有用的信息,之前竟然没有发现这么有用的配置,需要反思。 验证了最近跟艾力老师学到一句话,“Every diffculty slurred over will be a ghost to disturb your repose later on”.