1.vscode调试Node.js指南
2.JS代码调试映射工具——Source Maps简介
3.如何在浏览器中进行js调试?源码
4.如何使用Fiddler调试线上JS代码

vscode调试Node.js指南

       调试代码是开发和学习过程中不可或缺的技能，本文将为您揭示在vscode中高效调试Node.js的调试步骤。

       1. 调试业务JS

       在日常开发中，源码设置业务代码断点是调试常见操作。启动进程时，源码通过node --inspect index.js，调试检测网站源码获取到调试连接地址。源码接着，调试只需在vscode中点击设置的源码断点，然后点击绿色的调试调试三角形，vscode将自动连接Node.js的源码WebSocket服务，即可进行调试，调试也可借助Chrome Dev Tools进行。源码小兔鲜源码

       2. 调试Addon的调试C++

       虽然调试C++部分在Addon中不常见，但当需要时，源码配置如下：在C++代码设置断点，通过node-gyp build --debug编译debug版本，JS加载debugAddon，然后点击小虫子开始调试。

       3. 调试Addon的C++和JS

       当需要同时调试C++和JS时，与上述类似，先调试C++，然后选择Attach node C/C++ Addon，再次点击三角形，选择js文件进行调试。驱动刷屏源码

       4. 调试Node.js源码C++

       学习Node.js源码时，可以在node_main.cc的main函数或其他C++代码中设置断点，点击小虫子启动调试。

       5. 调试Node.js源码C++和JS代码

       源码包括C++和JS，先在vscode中开始调试，执行完Node.js启动流程后，连接浏览器调试JS，通过WebSocket服务进行联调。

JS代码调试映射工具——Source Maps简介

       在JavaScript开发中，Source Maps扮演着至关重要的角色，特别在利用Babel等工具处理ES6+代码转换为ES5的过程中。简单来说，onenote网站源码Source Maps是一种技术，它能够将经过转换的代码准确地映射回原始的源代码，从而实现更为直观的调试和错误追踪。

       其工作原理是通过在构建过程中生成额外的映射文件，该文件包含了转换前后代码之间的对应关系。这种映射信息使得开发者能够在出现错误时，直接在原始源代码中定位问题，而无需查看复杂的转换后代码。

       在实际操作中，开发工具通常会自动或通过配置生成Source Maps。这不仅提升了调试效率，还便于版本控制和部署，源码bug多因为开发者可以跟踪代码从源到编译后的变化过程。

       然而，使用Source Maps并非没有代价。它可能增加文件大小，影响性能，并需要考虑安全因素，比如防止恶意代码利用Source Maps进行攻击。因此，开发者在集成和使用时需要根据项目的具体需求，权衡性能和文件管理，确保其在开发环境中的有效性和安全性。

       总的来说，Source Maps作为现代JavaScript开发中的关键组件，通过其集成性和灵活性，极大地提升了开发者的工作效率，使得代码的调试和管理变得更加直观和高效。

如何在浏览器中进行js调试?

       如何在浏览器中进行js调试？

       在生产环境中遇到线上bug无法复现时，需要在浏览器中进行js调试。在测试环境调试代码不靠谱，因此需要快速找出问题原因，避免直接改动线上代码。生产环境代码通常关闭了source map和经过混淆，接下来介绍如何在这些情况下进行调试。

       一种方法是通过console找到源代码打断点。在浏览器控制台的console面板，找到由bug导致的报错信息或日志，点击文件名称跳转到源码位置，直接在代码中设置断点进行调试。

       若点击文件名后出现错误，可以调整浏览器控制台设置，取消勾选“Enable JavaScript source maps”，重新点击文件名即可。此方法简便易行，但无法处理没有报错信息或难以在代码中插入log的情况。

       另一种方法是利用network面板的Initiator找到源代码。将鼠标移至请求的Initiator，查看调用链中的方法和函数，找到离bug最近的接口请求，从而定位到所需方法或函数。混淆代码中函数和变量名称改变，但对象中的方法和属性名称保持不变。通过识别调用栈中的对象方法名称，可以快速定位源代码。

       以一个例子说明，假设有一个service/common.js文件被业务组件调用。在Initiator调用栈中找到对应的getMessageList方法，并确定initData调用了该方法。在调用栈中，getMessageList方法之上即为源代码位置，点击文件名称即可跳转。

       如果源代码被压缩，点击左下角的花括号恢复代码格式，对比混淆前后的代码，通常差异不大，便于进行调试。

       另一种情况是bug位置没有接口请求。通过Initiator找到对应的源代码js文件，搜索已知的属性和方法名称，因为这些名称在混淆过程中不会改变，同样能定位到源代码。

       总结：本文介绍了两种在线上进行js调试的方法。通过console找到源代码打断点或利用network面板的Initiator，快速定位和解决线上bug。希望本文能帮助您更有效地进行浏览器中的js调试。

如何使用Fiddler调试线上JS代码

       ä»Šå¤©åˆ†äº«ä¸€ä¸‹å¦‚何用Fiddler来修改并调试线上的JS代码.

       ä»¥åšå®¢å›­é¦–页为例子,用我本地的一个js文件来替换它的一个js.

       æŸ¥çœ‹é¦–页源码发现一个js,就拿它开刷了.

       1、打开fiddler,捕获博客园的首页请求. 找到“aggsite.js”的请求.

       2、这里有个技巧,可以通过 “select”命令来筛选js请求. 在下面的命令框输入“select script”回车即可. 如下图.

       3、接着把这个请求拖动到“AutoResponder”面板.

       æ‹–动之前记得先勾上 “Enable automatic responses”和 “Permit passthrough for unmatched requests”.

       4、然后在Rule Editor的第二下拉框选择 “Find a file”来选择本地的JS文件, 选择后点 Save.

       è¿™é‡Œæˆ‘用本地的“test fiddler.js”来替换博客园首页的“aggsite.js”.

       /u/article/details/