ChromeDevTools中的现代Web调试

大家好，我是CUGGZ。如今，开发人员通常使用框架、构建工具和编译器从更高级别的角度编写Web应用程序。在DevTools中调试或分析Web应用程序时，您目前可以查看和调试编译后的代码，而不是实际编写的代码。很多时候，我们不想调试编译压缩后的代码，而是调试原始代码：在使用TypeScript时，我们不想调试编译后的JavaScript，而是调试原始的TypeScript代码；在使用Angular、JSX等模板时，您不想调试生成的DOM。相反，调试您自己编写的组件。总而言之，我们可能希望在编写代码时对其进行调试。虽然源地图在某种程度上缩小了这一差距，但ChromeDevTools和生态系统在这方面可以做得更多。下面一起来看看吧！1.部署和编写的代码目前，在Sources面板中浏览文件树时，您可以看到编译（通常是压缩）包的内容，这些是浏览器下载并运行的实际文件。DevTools调用此已部署代码。这样在调试的时候可能不是很方便，我们要查看和调试的是自己写的代码，而不是打包后的代码。为了弥补这一点，现在有一棵树显示我们编写的代码（这称为创作代码）。这使得树更接近于在IDE中看到的源文件，并且这些文件现在与已部署的代码分开：可以在ChromeDevTools中打开此选项：DevTools>Settings>Experiments>GroupsourcesintoAuthoredandDeployedtrees。注意：ChromeDevTools团队计划很快默认启用此实验性选项。2.只是我的代码注意：这是ChromeCanary106版本的预览功能。在框架之上使用依赖项或构建应用程序时，第三方文件可能会阻碍我们的调试。很多时候，我们只想调试自己写的代码，而不是node_modules文件中隐藏的一些第三方库的代码。为了弥补这一点，DevTools有一个默认启用的附加设置：自动将已知的第三方脚本添加到忽略列表。它可以在DevTools>Settings>IgnoreList中找到。启用此设置后，DevTools会隐藏任何标记为被框架或构建工具忽略的文件或文件夹。作为开发人员，我们不需要做任何事情来启用这个新行为，实现取决于框架。例如，从Angularv14.1.0开始，其node_modules和webpack文件的内容已被标记为已忽略。因此，这些文件夹，其中的文件等，不会出现在DevTools中无处不在。(1)这些被忽略的文件不再出现在堆栈跟踪中，现在你可以看到更多相关的堆栈跟踪信息：如果你想查看堆栈跟踪的所有调用帧，你可以点击Showmoreframes链接。这同样适用于调试和单步执行代码时看到的调用堆栈。当框架或打包程序将第三方脚本通知DevTools时，DevTools会自动隐藏对框架的所有不相关调用，并在单步执行时跳过任何忽略的代码。(2)在文件树中，如果想在Sources面板的Authoredcode树中隐藏被忽略的文件和文件夹，需要在Settings>ExperimentsofDevTools中勾选Hideignore-listedcodeinsourcestreeview。在示例Angular项目中，node_modules和webpack文件夹现在被隐藏了：（3）快速打开菜单中被忽略的代码不仅可以隐藏在文件树中，还可以隐藏在“快速打开”菜单中（快捷键：Control+P(Linux/Windows)或Command+P(Mac)）。3.堆栈跟踪的改进ChromeDevTools对堆栈跟踪进行了更多改进。(1)Linkedstacktrace当一些操作被异步触发时，DevTools中的stacktrace目前只能显示部分情况。例如，在framework.js文件中有一个简单的调度器：functionmakeScheduler(){consttasks=[];return{schedule(f){tasks.push({f});},work(){while(tasks.length){const{f}=tasks.shift();F（）;}},};}constscheduler=makeScheduler();functionloop(){scheduler.work();requestAnimationFrame(loop);};loop();在example.js文件中使用调度程序：在someTask方法或检查控制台中打印的跟踪中，我没有看到与businessLogic()调用相关的任何内容：我也没有在堆栈跟踪中看到面包屑来帮助我们找出导致任务因果关系的事件.由于称为“异步堆栈标记”的新功能，通过将异步代码的两部分链接在一起解决了这个问题。AsyncStackTaggingAPI引入了一个名为console.createTask()的新控制台方法。API签名如下：interfaceConsole{createTask(name:string):Task;}interfaceTask{run(f:()=>T):T;}console.createTask()调用返回一个任务实例，可以用来运行任务f的内容。//任务创建consttask=console.createTask(name);//任务执行task.run(f);任务形成了创建它的上下文和执行异步函数的上下文之间的链接。注意：异步堆栈标记API将在Chrome106中可用。将其应用于makeScheduler函数，代码变成这样：functionmakeScheduler(){consttasks=[];return{schedule(f){consttask=console.createTask(f.name);tasks.push({task,f});},work(){while(tasks.length){const{task,f}=tasks.转移（）;任务。运行（f）；//而不是f();}},};有了它，ChromeDevTools现在可以更好地显示堆栈跟踪：请注意businessLogic()现在如何包含在堆栈跟踪中。不仅如此，该任务还被命名为someTask而不是之前的通用requestAnimationFrame。(2)友好的调用框架在构建项目时，框架通常会生成各种模板语言的代码，例如Angular或JSX模板，将看起来像HTML的代码转换为最终在浏览器中运行的纯JavaScript。有时，这些生成的函数使用不太友好的名称-压缩的单字母名称，或者一些晦涩或不熟悉的名称。在示例项目中，包含一个名称：AppComponent_Template_app_button_handleClick_1_listener，可以在堆栈跟踪中看到：为了解决这个问题，ChromeDevTools现在支持通过源映射重命名这些函数。作为开发者，我们不需要做任何事情来启用这个特性，实现依赖于框架。借助本文列出的新特性，ChromeDevTools可以为我们提供更好的调试体验！Chrome团队想要探索的领域还有很多，尤其是如何改进DevTools中的性能分析体验。期待ChromeDevTools在未来能带来更友好的调试体验！参考：https://developer.chrome.com/en/blog/devtools-modern-web-debugging/