liriliri / chii

Remote debugging tool

liriliri

An HTML5 game engine designed specifically for making visual novels.

License

This content is released under the MIT License.

chii's Issues

Debug

Bad gateway

The demo and site links on the readme page are producing bad gateway errors

Network tab not showing requests made by SuperAgent

I dont see any requests which was made by superagent (https://github.com/ladjs/superagent) client, but I see requests which was made by fetch.

Any idea why?

[bug]多次刷新调试器有内存泄漏

调试器关闭的时候，监听的close没有释放

chii start -p 8080 -ssl 新增https协议

如题

Differences in console log messages between embedded Chii and Chrome Dev Tools

When triggering an error, it seems like it changes the file structure of the referenced code. For example when I trigger a file from appComponent.ts it will appear in the console as main.js instead.

heres a bookmarklet to add to the readme if u want

javascript:var scrpt=document.createElement("script");scrpt.src="http://localhost:8080/target.js";document.body.append(scrpt);

when npm install chii -g

Not Found - GET https://npm-registry.yy.com/koa-router/download/koa-router-8.0.8.tgz

npm ERR! code E404
npm ERR! 404 Not Found - GET https://npm-registry.yy.com/koa-router/download/koa-router-8.0.8.tgz
npm ERR! 404
npm ERR! 404 'koa-router@https://npm-registry.yy.com/koa-router/download/koa-router-8.0.8.tgz' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm run build:front_end error : depot_tools/ninja.py: Could not find Ninja in the third_party of the current project, nor in your PATH.

• npm run build:font_end

> cd devtools/devtools-frontend && gn gen out/Default --args="is_debug=false" && autoninja -C out/Default && gulp copy:release

Done. Made 1810 targets from 387 files in 855ms
depot_tools/ninja.py: Could not find Ninja in the third_party of the current project, nor in your PATH.
Please take a following action to install Ninja.
- If your project has DEPS, Add a CIPD Ninja dependency to DEPS.
- Oterweise, Add Ninja to your PATH *after* depot_tools.

I have installed depot_tools locally, but I do not know why the error is still reported.

如何调试 js 文件

是否可以支持 js debugger 的能力呢

依赖module缺失

在执行npm run ci时，报错：

(node:14248) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open ''

在对这段代码debug后 :

function lookupFile(fileName) {
for (const pathFolder of pathFolders) {
const absoluteFileName = path.join(pathFolder, fileName);
if (fs.existsSync(absoluteFileName)) return absoluteFileName;
}
return fileName;
}

发现缺失报错变为：

• (node:14248) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open 'mobile_throttling/module.json'

但是我在本地文件中，是没有找到这个文件夹和文件名的

Problem running locally

Hey, thanks for the great package!

I'm trying to implement local https however I've forked, install and included the submodule however running the front_end build (or dev) cannot find modules needed. Specifically:

rmdir(outFolder, async err => { await sleep(500); await buildApps(['chii_app', 'devtools_app', 'formatter_worker_entrypoint']); });

However only chii_app has the corresponding files that the copyApp function is looking for. There is however 'empty_app' files:

Any help getting it going would be appreciated

Can it support uncheck or modify existed style in style panel ?

First of all I must say great work!

Can it support uncheck or modify existed style in style panel ？ or at least support uncheck, thanks!

关于多用户区分的建议

是否可以通过客户端script.src的路径参数来显示多用户

部分网络请求数据丢失

用法

在页面最开始加载 target.js 控制台日志可以完整记录下来
但网络请求(XHR) 会将最初的几条请求日志丢失

chii version 1.10.0

building fails, any advice?

$yarn build
yarn run v1.22.21
$ gulp clean && webpack --mode=production && npm run build:front_end
[09:28:55] Using gulpfile ~/work/repos/chii/gulpfile.js
[09:28:55] Starting 'clean'...
[09:28:55] Finished 'clean' after 7.38 ms
.........

webpack 5.89.0 compiled with 3 warnings in 2776 ms

[email protected] build:front_end
cd devtools/devtools-frontend && gn gen out/Default --args="is_debug=false" && autoninja -C out/Default && gulp copy:release

sh: line 0: cd: devtools/devtools-frontend: No such file or directory
error Command failed with exit code 1.

可以用playwright 链接吗？好像得不到page?

考虑用chii来做测试，但用playwright 链接好像得不到page?

`

I use Playwright connect via CDP to emulator Chiijs(https://github.com/liriliri/chii) , which is similar to weinre, while Playwright doesn't return targets(pages), what endpoint or method to get that? any advice?

const url = "ws://localhost:8080/client/XXXXXX?target=YYYY&rtc=false"
const browser = await chromium.connectOverCDP(url, {slowMo:40000, timeout:5000000, });
const contexts = await browser.contexts()
const pages = await contexts[0].pages() // pages.length == 0

`

How to open the screencast option?

如何开启设备项 实时看到真机页面呢？

本地clone下来执行build任务失败

每次连上client后，过6秒左右target就会断开

Load devtools and attach listeners before page is loaded in iframe mode

Hello, I'm trying iframe mode and i'd like to load the devtools and its features before any other scripts are loaded.

Here's a minimal example code

<!DOCTYPE html>
<html lang="en" style="height: 100%; padding: 0; margin: 0;">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="height: 100%; padding: 0; margin: 0;">
  <iframe id="target" frameborder="0" style="width: 100%; height: 50%; display: block;"></iframe>
  <iframe id="devtools" frameborder="0" style="width: 100%; height: 50%; display: block;"></iframe>
  <script src="iframe.js"></script>
</body>
</html>

// iframe.js
const targetIframe = document.getElementById('target');
const devtoolsIframe = document.getElementById('devtools');

window.addEventListener('message', event => {
  targetIframe.contentWindow.postMessage(event.data, event.origin);
});

const origin = window.location.origin;

function load() {
  targetIframe.contentWindow.ChiiDevtoolsIframe = devtoolsIframe;

  const html = `
    <!DOCTYPE html>
    <html
    <head>
      <script
        type="module"
        src="${origin}/chii/target.js"
        cdn="${origin}/chii"
        embedded="true">
      </script>
    </head>
    <body>

      <script>
        console.log('this will be missed')

        setTimeout(() => {
          console.log('this will be ok because console is attached')
        }, 5000);    
      </script>

      <div>Hello Chii!</div>
    </body>
    </html>`;


  const doc = new DOMParser().parseFromString(html, "text/html");
  const cd = targetIframe.contentDocument;
  cd.open();
  cd.write(doc.documentElement.outerHTML);
  cd.close();
}

load();

You can try it here https://chii-embedded.replit.app/
Here's the same code on Replit https://replit.com/@replitfaris/chii-embedded

The console.log('this will be missed') is not logged in the console because the console is loaded too late, even though the target.js script is loaded early.

I'd like to at least buffer the network requests and console.logs so that when the devtools appears we add the logs, is this possible?

I'm happy to sponsor this effort if you're open to it.

Elements Styles 看不见 @meida 中定义的样式

如题

Target.js disconnecting

Is there any way to change target.js so it automatically reconnects to the server when the device reconnects to wifi?

PS4 error on socket disconnect

Hello,

Thank you for the great alternative to weinre.

We are using this across many different media platforms with great success but we are having issues using this on PlayStation 4

When the websocket disconnects we get the following error:

2021-03-05 11:09:26 client djV3YN disconnected
events.js:292
      throw er; // Unhandled 'error' event
      ^

RangeError: Invalid WebSocket frame: RSV1 must be clear
    at Receiver.getInfo (/usr/local/lib/node_modules/chii/node_modules/ws/lib/receiver.js:178:14)
    at Receiver.startLoop (/usr/local/lib/node_modules/chii/node_modules/ws/lib/receiver.js:131:22)
    at Receiver._write (/usr/local/lib/node_modules/chii/node_modules/ws/lib/receiver.js:78:10)
    at doWrite (_stream_writable.js:403:12)
    at writeOrBuffer (_stream_writable.js:387:5)
    at Receiver.Writable.write (_stream_writable.js:318:11)
    at Socket.socketOnData (/usr/local/lib/node_modules/chii/node_modules/ws/lib/websocket.js:900:35)
    at Socket.emit (events.js:315:20)
    at addChunk (_stream_readable.js:295:12)
    at readableAddChunk (_stream_readable.js:271:9)
Emitted 'error' event on WebSocket instance at:
    at Receiver.receiverOnError (/usr/local/lib/node_modules/chii/node_modules/ws/lib/websocket.js:805:13)
    at Receiver.emit (events.js:315:20)
    at errorOrDestroy (internal/streams/destroy.js:108:12)
    at onwriteError (_stream_writable.js:418:5)
    at onwrite (_stream_writable.js:445:5)
    at Receiver.startLoop (/usr/local/lib/node_modules/chii/node_modules/ws/lib/receiver.js:152:5)
    at Receiver._write (/usr/local/lib/node_modules/chii/node_modules/ws/lib/receiver.js:78:10)
    [... lines matching original stack trace ...]
    at Receiver.Writable.write (_stream_writable.js:318:11) {
  [Symbol(status-code)]: 1002
}
error Command failed with exit code 1.

All of our other platforms either reconnect automatically or can be reconnected manually through dev tools

Adding ws.on('error', ...) might help to resolve this issue and make chii more stable with error handling

IOS 无法通过IP+port方式注入脚本

1. IOS16.3.1 无法通过IP+port的方式注入脚本

做了以下尝试：

1. 直接通过<script src="//host-machine-ip:8080/target.js"></script> 方式注入脚本时，该请求会直接被屏蔽，whistle无法抓到target.js的请求
2. 将testtarget.com 代理到host-machine-ip:8080，通过whistle能够抓到target.js的请求，但是无法在本地的localhost:8080端口以及
   testtarget.com下的inspect page 找到请求页面.

能支持原有样式的修改吗

string-logs are too dark in firefox/ios

as seen here

firefox (ios)

chrome (ios)

In firefox (ios) string-logs are displayed too dark.

It is due to the following css-style:

This style is only applied in firefox (could not test in safari since no logs were produced at all)

release 1.6.0 support proxy

可以描述下这个功能么？

WebSocket connection to xxx failed ,inspect页面也没有监听到页面

source and network panel doesn't work

B

How to configure proxy?

In 1.6.0 version proxy support was introduced. At the same time, it's absolutely unclear how to set up proxy.
In params I didn't find a new related to proxy, in UI, I also don't see an additional option.
Could you provide a manual on how to configure proxy?

是否有生命周期相关方法？

以下代码中，第一个 console.log 打印不出来；等3000ms，chii初始化好后，第二个console.log 能正常打印。

<script src="//chii.liriliri.io/target.js" embedded="true"></script>
<script>
    console.log('hello');   // 不会打印
    setTimeout(() => console.log('world'), 3000)   // 会正常打印出来
</script>

是否有监听函数，能确保我的代码都在 dev tools初始化完成后执行呢？类似如下：

<script src="//chii.liriliri.io/target.js" embedded="true"></script>
<script>
    // 把所有代码包裹到Chii.onReady的回调中：
    Chii.onReady(() => {
        console.log('hello');   // 会打印
    });
</script>

原因是我的网站有一个在线IDE，允许用户输入js在网页执行，但是用户的console.log等方法一开始无法在chii中打印出来。

无法和 eruda 一样显示最初的日志

用法

在页面最顶部使用该工具 在打开web inspector 后 显示的日志数据缺失了一部分日志内容

Help: 能否给个目前支持的功能list?

感谢开源新的remote debug工具，目前的功能是不是紧紧局限于Elements tab的inspector, 像sources network 这些tabs还是没有数据？

devTools过几秒会显示websocket已断开连接，怎么解决

ws.url = q.url; 发生错误

node -v
v14.15.1

打开页面：http://localhost:8080/tests/demo.html
chii发生错误退出了

`D:\Program Files\node\node_modules\chii\server\lib\WebSocketServer.js:39
ws.url = q.url;
^

TypeError: Cannot set property url of # which has only a getter
at D:\Program Files\node\node_modules\chii\server\lib\WebSocketServer.js:39:20
at WebSocketServer.completeUpgrade (D:\Program Files\node\node_modules\chii\node_modules_ws@7.4.0@ws\lib\websocket-server.js:330:5)
at WebSocketServer.handleUpgrade (D:\Program Files\node\node_modules\chii\node_modules_ws@7.4.0@ws\lib\websocket-server.js:246:10)
at Server. (D:\Program Files\node\node_modules\chii\server\lib\WebSocketServer.js:34:13)
at Server.emit (events.js:315:20)
at onParserExecuteCommon (_http_server.js:695:14)
at onParserExecute (_http_server.js:608:3)
`

断开网络，再恢复网络没有重新连接。

断开网络，再恢复网络没有重新连接。

有没有办法实现调试工具的一些定制？

比如：

1. 网络请求的过滤，希望过滤一些无关请求
2. 自定义 console 格式化逻辑
3. 自定义报错时的错误栈跳转逻辑

如何支持memory 面板

How to start on Console tab on initial opening

How to start on Console tab by default? Currently it's on Element tab on initial opening.

Debug.index.html

[功能] 能加插件么，比如react/vue devtools

Chii console pulls focus on load

I wrote in the discussion, but feel this might actually be a bug. When a page re-loads Chii pulls focus to its console. This can be seen on multiple reloads when you try to type into the page and the keystrokes show up in the Chii console. Is there an option to remove this behavior or any guidance on where I can find this focus code to remove it?

无法调试断点，无法获取初始化时的网络数据

What about compatibility

I‘m working for IPTV in china. most browseres are on android 4.4 ,Is this tool suitable for me？

不支持 https 吗？

https的项目中引入不了。

Build target

Hi!

Can I build this project to a specific target browser? I'm trying to use this on an old Chromium-based browser that doesn't support object spread which is used in the current target.js file.

Errors not appearing in devmode

Throwing errors don't show up in the console. For example if you change this to throw new Error('error') you never see it in the console.

Failed to show network requests combined with eruda

Network panel shows no request when using both chii and eruda