调试H5游戏：使用--disable-web-security简化你的工作流

做过Laya游戏开发的都知道，Laya3.0以前版本的游戏调试，是通过file协议直接打开index.html文件。有人就会有疑问,浏览器的跨域资源共享（CORS）策略，不是会阻止从不同源的资源加载，Laya是如何做到的呢，别急，先看下图

如上图，当用Laya IDE调试H5游戏的时候，你会发现在打开的浏览器地址输入栏下面会有一个关于--disable-web-security的警告提示，为何会有这个提示，原来是launch.json配置中设置打开index.html附带了参数--disable-web-security:

json 复制代码

// launch.json
{
 "version": "0.2.0",
 "configurations": [ 
  {
            "name":"chrome调试",
            "type":"chrome",
            "request":"launch",
            "file":"${workspaceRoot}/bin/index.html",
            "runtimeArgs":[
                 "--allow-file-access-from-files",
                 "--disable-web-security"
              ],
            "sourceMaps":true,
            "webRoot":"${workspaceRoot}",
            "userDataDir":"${workspaceRoot}/.laya/chrome",
            "sourceMapPathOverrides":{
                 "src/*":"${workspaceRoot}/src/*"
            }
  }
 ]
}

什么是 `--disable-web-security`？

这是一个Chrome的启动参数，它告诉浏览器禁用某些Web安全策略，包括CORS策略。这意味着当你在开发环境中使用这个标志时，你的应用可以请求来自任何源的资源，而不会受到CORS错误的影响。

为什么需要 `--disable-web-security`？

当你双击 index.html 文件打开游戏时，你实际上是在使用 file 协议而不是 http 或 https。在这种情况下，浏览器的许多安全限制会阻止你从其他文件或外部服务器加载资源，尤其是当这些资源跨域时。

例如，假设你的游戏需要从外部API获取数据，或者加载位于不同目录的纹理和资产。使用 file 协议打开时，浏览器会抛出CORS错误，并阻止这些请求。

此时 --disable-web-security 就派上用场了，它可以帮助开发者绕过这些限制。

如何使用？（以mac系统为例）

关闭所有Chrome实例：这一步很关键，以确保新启动的Chrome实例具有正确的参数。
使用命令行 ：打开命令行工具，然后运行Chrome，添加 --disable-web-security 和 --user-data-dir 参数。

在macOS上的命令示例如下:

json 复制代码

open -n /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir=/your/location

之后，你就可以自由地双击 index.html 文件，加载和测试游戏了，而不必担心CORS和其他安全限制。

不带--disable-web-security时，双击index.html，你发现因跨域错误，而无法进入游戏

带--disable-web-security时，双击index.html，不会报跨域错误，很快就进入到游戏

注意事项

安全风险：禁用Web安全策略确实很方便，但它也关闭了浏览器的所有安全防护。这意味着跨站脚本攻击和其他潜在的Web攻击方式变得更加容易。因此，绝对不要在非开发环境下使用这个参数，并且尽量不要访问除你的游戏之外的其他网站。
独立的用户目录 ：使用 --user-data-dir 参数为开发会话指定一个新的用户目录。这不仅可以保证浏览器的状态不受你主要配置的影响，而且还提供了额外的安全层。
不是长久之计：虽然这种方法在开发过程中非常有用，但在生产环境或与其他人分享你的游戏时，它并不适用。为了更好地模拟真实环境，建议在开发的晚期使用本地服务器或其他方法进行调试和测试

关闭 --disable-web-security

关闭就比较简单了，只要完全关闭浏览器就可以了，再打开浏览器，默认是禁用--disable-web-security标记的。

其他的调试建议

使用开发者工具：Chrome和其他现代浏览器都有强大的开发者工具，让你可以检查、调试和分析你的游戏。熟悉这些工具可以帮助你更有效地找到和修复问题。
源映射（Source Maps） ：如果你使用的是编译到JavaScript的语言（如TypeScript），确保启用源映射。这样，当你在浏览器中调试时，你将看到原始代码而不是编译后的代码。
性能分析：使用浏览器的性能工具来分析游戏的帧率、CPU使用率和其他关键指标。这可以帮助你找到性能瓶颈并优化游戏。

结论

H5游戏开发中的快速迭代和测试是成功的关键，而Chrome的 --disable-web-security 参数提供了一个快速启动和测试游戏的方法，而不必担心浏览器的安全限制。但是，使用这个参数时要谨慎，确保你了解潜在的风险，并在开发结束后返回到标准的浏览器配置。

本文介绍--disable-web-security，并不是说他有多好，仅仅只是介绍一种调试方式，本人还是比较推荐搭建本地服务器来调试，这样更能反映真实的环境，目前从Laya3.0版本开始，也已经使用了内置服务器的方式来进行调试，Cocoscreator也一直是采用内置服务器的方式。