javascript - 有没有什么办法可以给外链H5页面插入vconsoe呢？

Question

比如说外链地址 :https://www.baidu.com/
我在手机访问的时候是没法控制外链的行为的，如果需要调试外链的话 有没有方法可以动态插入vconsole

Answer 1

手机浏览器 安装插件 油猴等 ，执行 vconsole 对应的 js

Answer 2

Fiddler 开启远程代理，手机连接到 Fiddler。

然后配合 FreeHttp 插件，修改 HTTP 响应，主要就是改 text/html 这种类型的响应，给它插入一个 script 标签进去。

另外注意尽量不要以外链的形式注入 script，因为现在很多网站都开启了 CSP，会限制外链来源。当然你都开代理了这点限制其实也可破，但步骤比较麻烦，一般还是推荐先把脚本下载下来，然后把整个内容注入进去。

Answer 3

你这是想要xss攻击呀老弟

Answer 4

要在外部链接的H5页面中插入VConsole，一种可能的方法是使用JavaScript。VConsole是一个轻量级的移动端开发者工具，可以通过在页面中插入一段JavaScript代码来启用。

以下是一个示例，展示如何将VConsole动态插入到外部链接的H5页面中：

1. 首先，确保你已经包含了VConsole的JavaScript文件。你可以从VConsole的官方网站下载最新版本的VConsole，或者使用CDN链接来引入VConsole。

<!-- 使用CDN链接引入VConsole --><script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script>

2. 创建一个脚本标签，用于动态插入VConsole的JavaScript代码。你可以将以下代码添加到你的页面中：

<script>  // 等待页面加载完成  window.onload = function() {    // 获取要插入VConsole的元素（可以根据需要进行修改）    var targetElement = document.body;        // 动态插入VConsole代码    var vconsoleScript = document.createElement('script');    vconsoleScript.textContent = `      // 配置VConsole的选项（可选）      VConsole.config.SHOW_NAVBAR = true; // 显示导航栏      VConsole.config.SHOW_SYSTEMINFO = true; // 显示系统信息面板      VConsole.config.SHOW_LOGobar = true; // 显示Logo和版本号      VConsole.config.SHOW_NETWORKINFO = true; // 显示网络请求面板      VConsole.config.SHOW_MEMORYINFO = true; // 显示内存信息面板      // ... 其他配置项（根据需要设置）            // 显示VConsole面板      VConsole.show();    `;    targetElement.appendChild(vconsoleScript);  };</script>

3. 将以上代码添加到你的页面中，确保它在需要插入VConsole的元素之后。这样，当页面加载完成时，VConsole代码将被动态插入到目标元素中。
4. 现在，当你访问外部链接的H5页面时，VConsole应该会自动显示在页面上。你可以使用VConsole的各种面板来调试和检查页面的行为。请注意，由于跨域限制和安全策略，某些功能可能无法在外部链接的页面上正常工作。