Chrome 调试 Web Worker 加载的 js 文件

更新于 2020-02-10写于 2020-02-10前端

以前在使用 requirejs 时遇到过加载的 js 无法在控制台调试的情况，今天做了下总结

创建了 script 标签引入的 js 在 FF，Chrome 都能在调试器里找到。
Web Worker 引入的 js 无法直接在 FF，Chrome 的调试器里找到，需要在：
Chrome 中：在引入的 js 文件顶部加上//@ sourceURL=async_test.js，然后就能在 (no domain) 中找到该 js
FF 中：怎么处理还不会。。。

eg：
test.html

html

 1<!DOCTYPE html>
 2<html lang="en">
 3  <head>
 4    <meta charset="UTF-8" />
 5    <title>Document</title>
 6  </head>
 7  <body>
 8    <!-- 1.在调试器可以找到 -->
 9    <!-- <script type="text/javascript" src="async_test.js" async="async"></script> -->
10    <!-- 2.在调试器可以找到 -->
11    <!-- <script>
12  node = document.createElement('script');
13  node.type = 'text/javascript';
14  node.charset = 'utf-8';
15  node.async = true;
16  node.src = './async_test.js';
17  document.getElementsByTagName("HEAD")[0].appendChild(node);  
18</script> -->
19    <!-- 3.js中加上//@ sourceURL=async_test.js才可以找的到 -->
20    <script>
21      //web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
22      var w = new Worker("./async_test.js");
23    </script>
24  </body>
25</html>

async_test.js

1//@ sourceURL=async_test.js
2console.log("async_test");
3importScripts("./async_test2.js");

async_test2.js

1//@ sourceURL=async_test2.js
2console.log("async_test2");