Giter VIP home page Giter VIP logo

devtools-remote-debugger's Introduction

Devtools Remote Debugger

中文文档

Based on Google's open-source devtools-frontend, you can use JavaScript to implement the Chrome DevTools Protocol . By simply loading a piece of JavaScript code on a web page, you can use the familiar Chrome DevTools to remotely debug the page.

The web page being debugged connects to an intermediate Node layer via WebSocket, and DevTools also connects to the Node layer via WebSocket. The primary role of the Node intermediate layer is to forward socket protocols between the web page and DevTools, enabling full-duplex communication between them.

Additionally, this project has been included in the awesome-chrome-devtools collection.

🎬 Debug DEMO

demo.mp4

🎉 Features:

Elements

  • Display Html Tags
  • Edit Html Attributes
  • Display Style Rules
  • Highlight Node
Preivew

Console

  • Execute JavaScript Code
  • Show Error Stack
Preivew

Sources

  • Show Source Code
Preivew

Network

  • Show XHR/Fetch Request
  • Show JavaScript/CSS/HTML Request
  • Show Image Request
Preivew

Application

  • Local Storage
  • Session Storage
  • Cookies
Preivew

ScreenPreview

  • Live Preview
Preivew

How to start?

Open the command terminal and start the following two commands

1. Start Serve

#1. Start the node service
npm run serve

# 2. Start a new terminal
npm run client

2. Open the debug page

Open two pages in the browser

How to use?

1、Modify the variables of the .env file

# The port number to start the Node, such as: port 80
DEBUG_PORT=8080
# Debug the domain name after the deployment of the backend, such as: https://www.remote-debug.com/
DEBUG_HOST='http://localhost:8080'
  1. Execute npm run build to build the project code, and the dist directory will be packaged. The structure is as follows:
├── page    # Debug backend
│   ├── index.css
│   ├── index.html
│   ├── index.js
├── cdp.js  # The CDP code for debugging needs to be loaded on the page being debugged. You can deploy it to a CDN.
  1. Start the backend
npm run start
  1. The browser opens the debugging backend http://www.debug.com/remote/debug/index.html, if the debugging target page loads the cdp.js code, then the debugging backend will see the connection record

💡Please note that www.debug.com is just an example, please replace it with your own specific domain.

Additional Information

Due to the restrictions of the same-origin policy, you may need to make the following changes:

  • By default, the browser does not allow JavaScript to read CSSRules from different domains. Therefore, when including external styles via a link, you need to add the attribute crossorigin="anonymous". This issue does not apply to styles within style tags.
  • To capture detailed JavaScript error information, you also need to add crossorigin="anonymous" to the script tags.

Star History

Star History Chart

License

MIT

Copyright (c) Nice-PLQ

devtools-remote-debugger's People

Contributors

bfrontend avatar l12g avatar linjunc avatar nice-plq avatar nonameshijian avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

devtools-remote-debugger's Issues

Styles 编辑

大佬,现在不能对style进行操作, 增删改都不行,后续会支持吗?

IOS16注入不了

<script src="http://192.168.1.151:8080/remote/debug/dist/page/sdk.js" crossorigin="anonymous"></script>请求好像会直接被屏蔽,抓包抓不到js请求,测试安卓可以抓到可以注入

控制其他浏览器

理论上是不是也可以,我用A浏览器(已设置允许跨域)打开一个网页,连接到B浏览器,控制B浏览器,脱离node转发那一层的依赖,这样就可以做我的网页控制本机多个浏览器的自动化操作了

sdk.js 放到remote html 中,wws连接失败

WebSocket connection to 'wss://localhost:8080/remote/debug/client/KTzC7tGi?favicon=&time=1691642483080&title=&ua=Mozilla%2F5.0%20%28iPhone%3B%20CPU%20iPhone%20OS%2016_0_3%20like%20Mac%20OS%20X%29%20AppleWebKit%2F605.1.15%20%28KHTML%2C%20like%20Gecko%29%20Mobile%2F15E148&url=xxxxindex.html' failed: Could not connect to the server.

Styles editor

Hi there,

I found this issue: #4
Can you please describe it here in english?
Really looking for this feature :)

BTW: would it be possible to use english in general here in issues? :)

WebSocket connection to报错

部署到了服务器https,页面报错WebSocket connection to,改成ws又报错DOMException: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

补充几个小问题

  1. 鼠标上去没有元素不显示块范围及尺寸, 我使用的是Google Chrome Canray的121.0.6126.0, 应该是使用了<script type="module" src="./entrypoints/inspector/inspector.js"></script>的原因,如果使用<script type="module" src="./entrypoints/devtools_app/devtools_app.js"></script>的原生页面就有范围和尺寸的显示,
  2. 直接修改元素的内容,页面反应,
    src/client/sdk/domain/protocol.js补充 DOM.setNodeValue数组属性
    src/client/sdk/domain/dom.js 添加
export default class Dom extends BaseDomain {
// ...

  /**
   * @public
   */
  setNodeValue(params) {
    const { nodeId, value } = params;
    // const node = getNode(nodeId)
    const node = nodes.getNodeById(nodeId);
    node.nodeValue = value;
  }
//...
}
  1. 修改之后调试器的展示不变,page.js缺少了监听参数
    this.observerInst.observe(document.body, {
      childList: true,
      subtree: true,
      attributes: true, 
      characterData: true, // 其他几个监听地方都添加了,早就这个Page.js没有添加
    });

一点点小建议

awesome project! 我觉得这个项目非常有前途。

有两个小疑问,
1、有 roadmap 吗?看起来目前还在迭代开发中,能否给个 roadmap 呢?这样大家比较清楚大概什么时候自己可以真的把这个项目用在自己的工作中。
2、考虑过 ts 么?你这个项目目测规模也不会特别小,ts 可能读起来会更清晰一些。

最后,加油💪🏻

请教一下,该工具在生产环境实际使用的最佳实践

作者所提到在测试环境,测试人员和开发人员不在同个地方,使用此工具有助于排查问题。
想了解下,生产环境是否也适合使用该工具排查问题?最佳实践如何。

  1. 考虑到全量生产用户加载此sdk,对用户本地性能可能有影响,并且ws服务端接收的客户端连接数可能很大。所以是否要结合灰度白名单方案,给上报问题的用户单独加载sdk。
  2. 项目若已经接入了错误监控系统。相较于错误监控系统,接入该工具,在排查生产问题时,哪些场景下有优势。

webview背景黑色

我尝试在安卓的webview上调试,但是页面背景色永远是黑色,这是什么原因
我这是一个spa的vue3应用
image

兼容性疑问

首先这是个很棒很有前景的项目! 我期待能早日变得壮大,
看完文档有个兼容疑问点,项目中使用的是 CDP (Chrome DevTools Protocol),请问client端sdk如果是运行在其他浏览器,例如:safari,firefox,夸克,微信这种浏览器,sdk是否能够兼容?目前兼容的列表有哪些呢?

关于安卓的问题

如果我能获取到安卓Webview的调试端口,那这个端口应该怎么使用?如果直接用这个端口进行调试的话,直接与devtools交互而不用sdk是否可行
79ed0bc0cb3dc2bfae6d55cacb3801a

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.