概要

本篇介绍一种十分方便的方法为网站添加 vConsole 调试(通过篡改请求外部注入的方式,不需要您是网站的拥有者,主要用于调试线上站点)。
之前已经发过一篇《借助FreeHttp为任意移动端web网页添加vConsole调试》,不过那篇操作起来还是比较复杂。因为那篇帖子使用了大量篇幅介绍操作原理,至使简单的问题也用了较长的篇幅,但是不是所有同学都喜欢那样的风格,而且为了演示FreeHttp对不存在资源的mock,对于vconsole.min.js使用了一个本地资源,让复杂度进一步加大。
 
现在借助FreeHttp2.3.0的规则分享功能,让操作变得十分简单,几乎不需要任何基础就可以马上看到效果。
 
 

如何开始

FreeHttp 插件安装

1:您的计算机需要已经安装Fiddler。 (如未安装,请至官网下载安装 http://docs.telerik.com/fiddler/configure-fiddler/tasks/configurefiddler

2:进入Fiddler安装目录的Scripts目录下,将FreeHttp.dll复制到该目录下即可 。 (文件下载请至:https://files.cnblogs.com/files/lulianqi/FreeHttp2.3.0zip  或 http://lulianqi.com/file/FreeHttp2.3.0.zip   解压可得到 FreeHttp.dll  )

3:重启Fiddler即可在面板中出现 FreeHttp 标签。

4:如果您是第一次使用Fiddler您可能还需要配置Fiddler开启https解析,或者您需要抓取手机移动端的请求您也需要先为这些设备安装根证书,不过这些设置比较简单您在互联网上也可以找到大量的说明。

如果您想详细了解FreeHttp 可以参考《借助FreeHttp任意篡改http报文 (使用●实现)》 (这个篇幅较长,有需要可以后面再看)

 

操作实践

 
FreeHttp插件安装完成后,直接选择【Moific Tool】-【load remote rule】打开远程规则分享窗口
 
 
在弹出窗口中只需要3步
  1. 在remote rule token 中填写 token 27fd3332873d4f659e29136a9d5c211d (27fd3332873d4f659e29136a9d5c211d 是公开的token 直接使用即可)
  2. 点击 Get Rule
  3. 点击 Merge Remote Rule
 
完成后您FreeHttp的 规则列表会自动添加分享的远程规则,按上图所示开启篡改规则。
 
进入Bing.com
 
现在您可以看到效果,并且可以开始调试。
 
通过对规则进行简单的修改,您可以将vConsole注入到任何网页(包括微信公众号,移动端网页,APP嵌入H5页面)
如何修改规则,可以参考 (2.3:『response-modific』响应修改
 

 

网页外部注入vConsole调试的更多相关文章

  1. 借助FreeHttp为任意移动端web网页添加vConsole调试

        以下介绍在不用修改代码并发布项目的情况下,为我们日常使用的移动web应用(如手机web淘宝)添加vConsole调试工具的方法   vConsole介绍 vConsole是一个轻量.可拓展.针 ...

  2. vConsole--针对手机网页的前端 console 调试面板。

    一个针对手机网页的前端 console 调试面板. 简介 vConsole 是一个网页前端调试面板,专为手机 web 页面量身设计,帮助开发者更为便捷地进行开发调试工作. 手机预览 http://we ...

  3. keil程序在外部RAM中调试的问题总结(个人的一点经验总结)

    keil程序在内部RAM调试的基本步骤网上已经有非常多了,我就不再赘述,大家能够在网上搜到非常多. 可是有些时候内部RAM并不够用,这就须要将程序装入外部RAM中调试,而在这个过程中可能会出现各种各样 ...

  4. How to:如何在调用外部文件时调试文件路径(常见于使用LaunchAppAndWait和LaunchApp函数)

    原文:How to:如何在调用外部文件时调试文件路径(常见于使用LaunchAppAndWait和LaunchApp函数) IS里调用外部文件的时候,一般都是用LaunchAppAndWait函数,比 ...

  5. SpringBoot中的application.properties外部注入覆盖

    由想要忽略properties中的某些属性,引发的对SpringBoot中的application.properties外部注入覆盖,以及properties文件使用的思考. SpringBoot 配 ...

  6. 让人恼火的经历——手机H5网页被注入广告

    你的网站是否在尾部出现了让人恼火的广告? 这次我算是遇到了这些流氓的广告.那么就让我们一步步攻克这些恼火的广告吧. 问题描述 某一天下午开始,我们制作的网站就开始被各种广告注入,类似上图这种. 还有在 ...

  7. 通过QEMU-GuestAgent实现从外部注入写文件到KVM虚拟机内部

    本文将以宿主上直接写文件到VM内部为例讲解为何要注入以及如何实现 tag: qemu-ga, qemu guest agent, kvm, guest-file-write, inject 小慢哥的原 ...

  8. 移动端 使用 vConsole调试

    前言 用vue 写移动端代码,有个报名页面 就在iOS 9下出现问题,vue的循环渲染都正常,一开始的数据也能取到.证明不是vue的兼容性问题 但是在用户点击按钮发现不能点击进入跳转 工具 推荐使用  ...

  9. 转: 如何用手机访问电脑本地 localhost 网页或者服务器, 以调试web项目

    最近开始转向移动开发方向,因此对于一个移动开发的前端来说,使用各种真机来进行自己网站或者系统的界面进行针对性的调试就显的尤为重要了. 因此,会经常通过电脑开启一个 wifi 来供手机进行连接,形成一个 ...

随机推荐

  1. 乒乓球队比赛,甲队有abc三人,乙队有xyz三人。 抽签得出比赛名单:a不和x比,c不和x,z比, 利用集合求出比赛名单

    import java.util.HashMap; import java.util.Map; /** * 乒乓球队比赛,甲队有abc三人,乙队有xyz三人. * 抽签得出比赛名单:a不和x比,c不和 ...

  2. Python多线程、线程池及实际运用

    我们在写python爬虫的过程中,对于大量数据的抓取总是希望能获得更高的速度和效率,但由于网络请求的延迟.IO的限制,单线程的运行总是不能让人满意.因此有了多线程.异步协程等技术. 下面介绍一下pyt ...

  3. MySQL注入点写webshell的五种方式

    0x00 写数据的前提 1,在mysql的配置文件 my.ini 中,secure_file_priv="c:/wamp64/tmp" 被注释 或者 `secure_file_pr ...

  4. Golang单元测试框架整理

    目录 一.单元测试是什么 二.单元测试的意义 三.Golang单元测试框架 3.1 Golang内置testing包 3.1.1 简单的测试 3.1.2 Benchmark 基准测试 3.1.3 运行 ...

  5. 详解__int128

    前言 如果遇到 long long 开不下的情况,可以使用 __int128 来博一把! note :__int128 仅 \(64\) 位 \(GCC G++\) 支持,不在 \(C++\) 标准中 ...

  6. IoC容器-Bean管理XML方式(创建对象和set注入属性,有参构造注入属性)

    Ioc操作Bean管理 1,什么是Bean管理 (0)Bean管理指的是两个操作 (1)Spring创建对象 (2)Spring注入属性 2,Bean管理操作有两种方式 (1)基于xml配置文件方式实 ...

  7. JavaScript基本数据类型和引用数据类型详解

    数据类型小知识 JavaScript主要数据类型共有7种,有string.number.boolean.undefined.null.symbol.object.其余7种可以笼统的分为两大类:基本数据 ...

  8. MySQL专题1: 字段和索引

    合集目录 MySQL专题1: 字段和索引 Float.Decimal 存储金额的区别? MySQL中存在 float, double 等非标准数据类型, 也有 decimal 这种标准数据类型 其区别 ...

  9. Flink源码学习笔记(2) 基于Yarn的自动伸缩容实现

    1.背景介绍 随着实时计算技术在之家内部的逐步推广,Flink 任务数及计算量都在持续增长,集群规模的也在逐步增大,本着降本提效的理念,我们研发了 Flink 任务伸缩容功能: 提供自动伸缩容功能,可 ...

  10. .NET 20周年软件趋势随想

    从2000年微软启动.NET战略时,我还是一位大学生,当年著名的黑客Miguel de Icaza , Miguel 为了寻找GNOME项目开发框架经过充分的调研启动了一个志存高远的项目:Mono,一 ...