关于前端:前端远程调试方案-Chii-的使用经验分享高速路检查轮胎的一种思路与实践

前端近程调试计划 Chii 的应用教训分享

Chii 是与 weinre 一样的近程调试工具，次要是将 web inspector 替换为最新的 chrome devtools frontend\
监控列表页面能够看到网站的题目链接，IP，useragent，能够疾速定位调试页面，监控页信息欠缺，反对 https 申请等，开发者工具能看到的都能看到。
本文次要介绍其应用，在电脑运行，通过注入 js 的形式将将远端的日志，申请等同步推送在电脑端查看显示，及命令的执行

我的项目地址：https://github.com/liriliri/chii

运行监控一览

• 启动
• nginx 配置
• 监控列表
• 监控页

Chii 装置

应用 npm 装置

npm install chii -g

Chii 运行及转发配置

• 如果是本地间接运行即可：chii start -p 8082
• 思考到可能存在的跨域状况，可参考如下配置运行应用

• 生产环境运行：chii start -p 8082 --base-path /chii -d xxxx.xxxx.xxx.com

  • 联合前缀和域名，不影响生产环境拜访，也能够应用生产环境域名拜访到 chii 服务
  • -p 端口
  • -base-path 前缀
  • -d 域名
  • 更多参数见源码

• 配置转发

  • 若须要调试的网站域名是：xxxx.xxxx.xxx.com，则 nginx 配置其转发 xxxx.xxxx.xxx.com/chii/
  • 如果网站是 https 则将正文处放开

real_ip_header X-Real-IP;
server {
    #location / {
    #    ....
    #}
    location /chii/ {
            real_ip_recursive on;
            proxy_set_header Host $http_host;
            # 运行 chii 的本地地址
            proxy_pass http://192.168.0.188:8082/chii/;
            proxy_set_header X-Real-IP  $remote_addr;
            proxy_set_header Host-Real-IP  $http_host;
            #https 则将上面正文的放开
            #proxy_set_header X-Forwarded-Proto "https";
            #proxy_set_header X-Forwarded-Ssl on;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
    }
}

拜访：https://xxxx.xxxx.xxx.com/chii/ 即可关上调试监控

chii 注入 js 转发开始调试

• 注入 js 参考

// 留神替换其中的域名
function injectTarget() {var e = document.createElement("script");
  e.src = "//xxxx.xxxx.xxx.com/chii/target.js";
  location.href.indexOf("embedded=true") > -1 &&
    e.setAttribute("embedded", "true");
  location.href.indexOf("cdn=true") > -1 &&
    e.setAttribute("cdn", "//cdn.jsdelivr.net/npm/chii/public");
  document.head.appendChild(e);
}
injectTarget();

将其退出到页面中即可，能够通过 query 参数获其余接口参数管制来是否启用
另外如果是要在高速上给火车换轮子：给生产环境运行中的单页利用中应用思路, 可参考上面命令
复制一个 html，而后注入，拜访 test.html 即可

# nginx 容器外部门路，依据理论状况调整
cp /usr/share/nginx/html/index.html /usr/share/nginx/html/test.html
echo "<script>function injectTarget(){var e=document.createElement('script');e.src='//xxxx.xxxx.xxx.com/chii/target.js';location.href.indexOf('embedded=true')>-1&&(e.setAttribute('embedded','true'));location.href.indexOf('cdn=true')>-1&&e.setAttribute('cdn','//cdn.jsdelivr.net/npm/chii/public');document.head.appendChild(e)}injectTarget();</script>" >> /usr/share/nginx/html/test.html

其余调试计划与工具

vConsole

我的项目地址：https://github.com/Tencent/vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。\
vConsole 是框架无关的，能够在 Vue、React 或其余任何框架中应用。\
当初 vConsole 是微信小程序的官网调试工具。
注入 js, 会显示一个图标，能够在设施端查看日志等信息

vConsole 的装置应用

最简略的形式是应用 cdn 引入而后初始化

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>

再或者须要先加载 vConsole 也能够应用 sed 命令替换题目注入 js

cp /usr/share/nginx/html/index.html /usr/share/nginx/html/test.html
sed -i 's#<title>xxxxx</title>#<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>\n<script>\n  var vConsole = new window.VConsole();\n</script>#' ./test.html

• 运行后如图所示

weinre 的装置应用

我的项目地址：weinre

一款基于 Web 开发的近程调试工具。是 Apache Cordova 我的项目的一部分。
常常有断线状况，不再保护，不再举荐

• 装置

npm -g install weinre

• 启动

weinre --httpPort 9090 --boundHost -all-

• 注入 js

<script src="http://localhost:9090/target/target-script-min.js#anonymous"></script>

当拜访调试页面时关上 http://localhost:9090/client/#anonymous 接口查看到被调试的页面监控链接，拜访即可

sentry

是一种开源的谬误跟踪和监控解决方案，用于帮忙开发者及时发现、修复和预防应用程序中的谬误和异样。
集成容易，然而用好还是不容易，一些关键性的日志及设置用户上下文的应用还是蛮重要的
装置应用能够参考这篇文章

写在最初

文章始于客户反馈产品挪动端白屏，因为是在生产环境，故想方法尝试了下 chii，用 chii 排除了一些谬误答案，生产环境还是须要反馈用户的踊跃配合才行 \
目前只能是用 sentry 记录下关键性日志剖析了，尽管因客户没有工夫来配合最初也没有解决问题，但感觉体验还是蛮好的，特此分享一二。