search

HuolalaTech / page-spy-web

Debug remotely and easily like chrome devtools.
https://www.pagespy.org
MIT License
4.27k stars 257 forks source link

支持通过 API 直接唤起面板 #236

Closed akirarika closed 2 months ago

akirarika commented 2 months ago

Description

PageSpy 很好用，解决了线上问题排查困难的问题

有几个功能小建议：

Suggested solution

对于当前版本，有相同需求的同学，可以通过这种方式变相的实现：

  1. 配置中添加 autoRender，在页面一开始时，不自动加载按钮和面板
window.$pageSpy = new PageSpy({
    autoRender: false,
});
  1. 当以合适方式触发时（例如点击版本号 5 次），手动加载按钮和面板
function innerCSS(css) {
    let el = document.createElement('style');
    el.type = 'text/css';
    el.innerHTML = css;
    document.head.appendChild(el);
}

// 加载按钮和面板
window.$pageSpy.render();
// 通过 css 隐藏按钮
innerCSS(`#__pageSpy .page-spy-logo { display: none !important; }`);

setTimeout(() => {
    // 模拟用户手动点击了按钮，唤起面板
    document.querySelector('.page-spy-logo').click()
}, 500);
  1. 如果想隐藏一些不必要的按钮，例如，我只希望用户将日志上传后把链接给我，而不需要实时调试和下载离线日志，我就隐藏掉多余的按钮
innerCSS(`#__pageSpy .page-spy-content__btn[data-testid="copy-button"] { display: none !important; }`);
innerCSS(`#__pageSpy #data-harbor-plugin-download { display: none !important; }`);

Alternative

No response

Additional context

No response

Validations