前言
我们在写webapp或者移动端网页需要嵌入到app时候，尤其是在APP内置的webView上加载我们的页面，想要查看手机浏览器信息是非常困难的事，当出现问题的时候，你又不能查看日志，一般会连接本地测试环境，然后在alert来打印日志（这种做法太蠢了），然后一遍一遍的定位bug，修改代码。使用eruda之后感觉爽爆了，解决了这个问题，这个工具就想电脑端的devtools，可以查看日志，网络，页面，Resources等
使用方法
方式一：多页面应用
在每个页面
<script type="text/javascript" src="https://cdn.bootcss.com/eruda/1.2.6/eruda.min.js"></script>
<script>eruda.init();</script>
方式二：动态加载
__DEBUG__ && loadJS('http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js', ()=>{
eruda.init();
});
方式三：指定场景加载
//比如线上 给自己留一个后门，
//我们一般的做法是喜欢给某个不起眼的元素，添加一个点击事件，要点它十次、八次以后才开启 debug 模式；
;(function () {
var src = 'http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js';
if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
方式四：单页应用
npm install --save-dev eruda
;(function () {
if (!/mdebug=true/.test(window.location.href)) return;
var script = document.createElement('script')
script.src = "https://cdn.bootcss.com/eruda/1.2.6/eruda.min.js"
script.async = true
document.getElementsByTagName('head')[0].appendChild(script)
script.onload = function () {
eruda.init()
}
})()
我们在项目的入口引用这个文件就可以
我们只需要在地址栏增加mdebug=true即可，是不是很方便？
下面是脚手架项目中项目的示例：
文件 urlUtils.ts 中：
export default class UrlUtils {
public static getQueryParam(paramName: string): string {
return (
(new RegExp(`[?|&]${paramName}=([^&;]+?)(&|#|;|$)`).exec(
location.href
) || ["", ""])[1].replace(/\+/g, "%20") || ""
);
}
public static getFileName(disposition: string): string {
let fileName = "";
if (disposition) {
const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
const matches = filenameRegex.exec(disposition);
if (matches != null && matches[1]) {
fileName = matches[1].replace(/['"]/g, "");
}
}
return fileName;
}
//更新url地址参数
public static changeURLPar(url, params) {
for(let key in params){
let pattern = key + '=([^&]*)';
let replaceText = key + '=' + params[key];
if (url.match(pattern)) {
let tmp = new RegExp(`${key}=[^&]*`);
url = url.replace(tmp, replaceText);
} else {
if (url.match('[\?]')) {
url = url + '&' + replaceText;
} else {
url = url + '?' + replaceText;
}
}
}
return url
}
}
文件loadDevTools.ts中
import UrlUtils from "./urlUtils";
(function loadDevTools() {
const showDevTools = UrlUtils.getQueryParam("sdt");
const now = new Date().valueOf() / 1000;
if (
showDevTools.length === 10 &&
Number(showDevTools) > now &&
Number(showDevTools) < now + 3600
) {
// 参数值为一小时内的时间戳才显示
const erudaScript = document.createElement("script");
erudaScript.src = "//cdn.jsdelivr.net/npm/eruda";
document.body.appendChild(erudaScript);
erudaScript.onload = () => {
// @ts-ignore
eruda.init();
};
}
})();
然后在 main.ts 中导入工具
import "./common/utils/loadDevTools";
参考资料：
GitHub - liriliri/eruda: Console for mobile browsers
点赞加关注，永远不迷路
