关于在Chrome开发者工具中设置//# sourceurl及调试HTML内嵌脚本的技术问询

没问题，我来给你梳理几个可行的办法，完全不用改动原页面的HTML代码：

一、手动添加//# sourceURL给内嵌脚本“命名”，优化调试体验 #

这正是你提到的方案，在Chrome DevTools里完全可以实现，步骤很清晰：

• 打开Chrome开发者工具（按F12或右键页面选「检查」），切换到Sources面板
• 在左侧的Page标签下找到当前页面的HTML文件，展开后找到对应的内嵌script块（通常显示为<inline script>或者带行号的代码条目）
• 双击打开这个脚本的内容，在代码的最后一行添加：//# sourceURL=你的自定义名称.js（比如//# sourceURL=my-inline-script.js，名称随便取，方便你识别就行）
• 按下Ctrl+S（Windows）或Cmd+S（Mac）保存修改——DevTools会自动更新脚本的上下文，之后你就能在Sources面板的Page目录下找到你命名的这个“虚拟JS文件”，断点调试、单步执行这些操作和普通独立JS文件完全一样

二、不用加sourceURL，直接调试内嵌脚本的快捷方式 #

如果你嫌加sourceURL麻烦，DevTools本身就支持直接调试内嵌脚本：

• 同样在Sources面板的Page标签下打开目标HTML文件，找到内嵌script的代码段，直接在需要调试的代码行号上点击，就能添加断点（行号会变成蓝色箭头，代表断点已生效）
• 要是脚本执行速度太快，断点来不及触发，可以用触发式断点：
  • 切换到Elements面板，右键点击和脚本相关的DOM元素，选择「Break on」里的对应选项（比如「Subtree modifications」），当脚本修改这个DOM时就会自动暂停
  • 或者在Sources面板的Breakpoints侧边栏，展开「Event Listener Breakpoints」，勾选你需要监听的事件（比如Mouse下的click），触发事件时就会暂停到对应的脚本代码
• 另外，Console面板也能帮上忙：直接在Console里调用内嵌脚本里的全局函数，或者输入debug(你的函数名)，下次这个函数被调用时DevTools会自动暂停到执行位置

小提示：处理压缩后的内嵌脚本 #

如果你的内嵌脚本是压缩混淆过的，直接看代码会很费劲，Sources面板里有个Pretty Print按钮（就是那个{}图标，在代码编辑区的右下角），点击后会自动格式化代码，不管是加sourceURL还是加断点都会方便很多

内容来源于stack exchange