Xylole.js～给前端黑客们的圣诞礼物～开发手记（简介）
本文的最初版是发表于 qitta.com Javascript Advent Calendar 第23日的文章。
前言：
作为一个“知乎龄”3年左右的资深小透明，我还没有写过一篇像样的干货(这篇估计也不算…)。作为只学化学的前(dan)端(shen)狗，别人过圣诞节的时候我就只能撸JavaScript了。撸着撸着我也算是撸出麒麟臂了(然而并不是…)。就把我几个月前一直在构思的一个项目给做出来了。命名为 Xylole.js 。
有什么用：
简单的说，就是一个可以远程调试网页的控制台。是的，就是一个远程版的浏览器Console。某些浏览器(例如移动端的Chrome)没有控制台，在这些浏览器调试网页会比较困难，使用 Xylole.js 能够在很大程度上解决无控制台的浏览器的调试问题。
直接上图(GIF・点击查看动图)：
名字的由来：
Xylole是芳香族化合物 二甲苯 的德语。我们也可以将它看作是“Cross(X)”和“Console”的合成词。再加上苯环标志性的六边形与Node.js的标志也有异曲同工之处，于是我就发扬化学人的恶趣味(雾)，将这个小工具取名为“二甲苯.js”了。
用法：
- 安装 Node.js
Xylole.js是基于Node.js的，而且当中用了不少ES2015的语法，所以，要先安装较新版的Node.js。最好是6.0以上的版本，4.7以上理论上也是能跑的(没试过)。
- 克隆GitHub仓库
大家的老朋友，全球最大的同性交友网站…
$ git clone https://github.com/jerrywdlee/Xylole.git
- 安装依赖包
$ cd Xylole $ npm i
Xylole.js有一个依赖包是"ngrok"，考虑到中国的特殊国情，大家可以选择科学上网，或是把这个依赖包给去掉。
- 启动服务端
$ npm run xylole
成功启动之后，命令行界面会显示像下图一样的信息(ngrok的URL是随机分配的，每次启动服务端URL都不一样)
- 挂载客户端脚本
服务端启动之后，会显示如何向目标网页挂载客户端，考虑到本透明英文写的比较烂，在这里用中文介绍一下。
首先，Xylole挂载客户端的方式有两种，一种是XSS(跨站脚本)模式，一种是CORS(跨来源资源共享)模式。XSS模式对大多数网页都是有效的，并且在XSS模式下，"load"命令是可以使用的。CORS模式是为了解决一部分网页在Http Header里限制了跨站资源的读取而开发的模式。使用CORS模式时必须使用“https”加载客户端脚本。
具体挂载客户端的方法就比较简单了，向地址栏贴一行代码执行就可以了。
XSS模式／显示加载(加载成功后显示输入框提示输入服务端地址)：
javascript:(function(d){var s=d.createElement('script');s.src='https://［随机地址］.ap.ngrok.io/js';d.body.appendChild(s)})(document)
XSS模式／隐式加载(加载成功后自动连接服务端，不显示任何提示)：
javascript:(function(d){var s=d.createElement('script');s.src='https://［随机地址］.ap.ngrok.io/jss';d.body.appendChild(s)})(document)
XSS模式／CDN加载(只有显示模式)：
javascript:(function(d){var s=d.createElement('script');s.src='https://cdn.rawgit.com/jerrywdlee/Xylole/master/min/xylole-client.min.js';d.body.appendChild(s)})(document)
CORS模式(只有显示模式)／目标网页有jQuery：
javascript:($.get('https://［随机地址］.ap.ngrok.io/csp',function(d){eval(d)}))
CORS模式(只有显示模式)／目标网页 没有 jQuery：
javascript:(()=>{var x=new XMLHttpRequest();x.onreadystatechange=()=>{if(x.readyState==4&&x.status==200){eval(x.responseText)}};x.open("GET","https://［随机地址］.ap.ngrok.io/csp",true);x.send()})()
注意：
一部分浏览器，如Chrome和FireFox，在向地址栏里黏贴以“javascript:”开头的代码时，会悄悄地将关键词“javascript:”给吞掉(PC端，手机端同样)。如果要成功挂载客户端脚本，请在黏贴代码之后手动在开头输入“javascript:”。
同时，Safari的手机端是不允许在地址栏执行JavaScript代码的，如果想要在iOS的Safari挂载客户端脚本的话，将CDN模式的代码做成bookmarklet会比较有效。
- 连接服务端
在显示加载模式下，当客户端脚本成功挂载之后，会显示下图的信息(隐式模式下不显示)
回到控制台界面，找到下列语句并将URL输入弹出的对话框，然后按“OK”确定
Please input url below into prompt shown in page : https://[RANDOM].ap.ngrok.io
当成功连接上服务器之后，控制台会显示当前网页的基本信息，输入“info”命令可以随时更新这一信息。
- 开始玩吧
演示(GIF・点击查看动图)
一些命令：
Xylole.js可以通过一些命令来简化操作，可以通过命令“command”来查看所有可用命令
本地命令：
无论是否连接上了网页，都可以使用以下命令
命令: "help" => 显示帮助信息
命令: "command" => 显示帮助信息
命令: "license" => 显示版权信息
命令: "qr" => 显示服务器端URL的二维码
命令: "qr-[cdn|em|sm|csp|csp-jq]" => 显示挂载客户端脚本代码的二维码，
从左到右是[CDN|显式|隐式|CORS|CORS(有jQuery)]
二维码演示(GIF・点击查看动图)：
远程命令：
必须连接上网页才能使用的命令
命令: "load [js|css] [URL]" => 向目标网页挂载某一远程资源(CORS模式下此命令无效)
# 用法 >>> load js https://code.jquery.com/jquery-1.11.1.min.js >>> load css https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css
命令: "disconnect" => 断开与目标网页的连接
命令: "close" => 关闭目标网页
自定义命令：
用户可用通过修改 customCommands.yml 文件来添加自定义命令，默认状态下已添加2个自定义命令
命令: "border" => 显示网页中所有元素的盒子边界
命令: "black-background" => 将网页的背景涂黑
自定义命令演示(GIF・点击查看动图):
原理：
Xylole.js其实只做了三件小事…
- 将客户端脚本和 Socket.io 脚本挂载到目标页面上
- 将控制台收到的信息通过WebSocket发送到目标页面上
- 客户端脚本将收到的代码用eval函数转变为可执行模式
很简单的原理，用来做玩具再好不过了。
多余的话：
本透明关注前端话题也有一段时间了，知乎大神众多，我等小透明一直没有机会发文章。本透明今日斗胆献丑，@几位我关注的大神，还请各路前端大神不吝赐教。望各路大神海涵。
@小芋头君 @小爝 @Jasin Yip @马天翼 @Milo Yip @于江水 @顾轶灵 @尤雨溪 @Stark伟 @cinwell
@王德福 @阿德 @王福朋 @River Yang @Mars韩笑 @廖雪峰
源码： jerrywdlee/Xylole
许可证： MIT
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
