itldg / web-serial-debug

浏览器串口调试工具
https://itldg.github.io/web-serial-debug/
Apache License 2.0
79 stars 22 forks source link

支持 ANSI 格式彩色日志 #7

Closed LiuGuoGY closed 1 month ago

LiuGuoGY commented 1 month ago

考虑增加 ANSI 格式彩色日志吗?ESP32 的 log 支持彩色的 ANSI 格式的日志,能够比较清晰的看到 error 和 warning 之类的。 VSCode 里面的 Serial 是支持的。

itldg commented 1 month ago

可以考虑的,很好的建议 但是我对终端的格式还没有很好的了解,估计要很久以后

LiuGuoGY commented 1 month ago

主要我也没啥时间,不然就提 PR 了。

itldg commented 1 month ago

都是苦命打工人,慢慢来

LiuGuoGY commented 1 month ago

找了一下, 可以用 https://github.com/xpl/ansicolor 里面的 ansi.parse () 方法,将 字符串分解为一个带 css 样式的数组

[ { css: 'font-weight: bold;font-style: italic;background:rgba(255,51,0,1);',
        italic: true,
        bold: true,
        color: { bright: true },
        bgColor: { name: 'lightRed' },
        text: 'foo' },

      { css: 'color:rgba(204,0,0,0.5);',
        color: { name: 'red', dim: true },
        text: 'bar' } ]

然后用 style 标签添加到 span 里面串起来。

itldg commented 1 month ago

好的,有时间了我来试试,谢谢

itldg commented 1 month ago

我推送了一个版本,并使用ESP32的日志输出做了测试,你试试看效果如何

LiuGuoGY commented 1 month ago

我只能说用牛逼来形容😁

LiuGuoGY commented 1 month ago

有个问题,当日志为 Verbose 时,字体颜色为白色,会和背景一样,看不见 image image

itldg commented 1 month ago

那就改变以下日志框的默认背景色吧,你把你收到的日志内容HEX的发一些上来吧,我测试下看看

LiuGuoGY commented 1 month ago
09:02:30.599 ←
HEX:1B 5B 30 3B 33 37 6D 5B 33 38 35 35 38 33 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 48 54 54 50 2F 31 2E 31 20 32 30 30 20 4F 4B 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 35 38 34 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 4C 61 73 74 2D 4D 6F 64 69 66 69 65 64 3A 20 54 68 75 2C 20 32 32 20 41 75 67 20 32 30 32 34 20 30 31 3A 30 31 3A 34 32 20 47 4D 54 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 35 38 37 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 45 74 61 67 3A 20 57 2F 22 39 31 35 35 34 36 64 61 32 65 66 34 64 61 31 3A 30 22 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 35 39 31 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 44 61 74 65 3A 20 54 68 75 2C 20 32 32 20 41 75 67 20 32 30 32 34 20 30 31 3A 30 31 3A 34 34 20 47 4D 54 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 35 39 36 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 43 6F 6E 74 65 6E 74 2D 54 79 70 65 3A 20 61 70 70 6C 69 63 61 74 69 6F 6E 2F 78 2D 6A 61 76 61 73 63 72 69 70 74 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 36 30 30 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 58 2D 50 6F 77 65 72 65 64 2D 42 79 3A 20 41 53 50 2E 4E 45 54 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 36 30 34 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 53 65 72 76 65 72 3A 20 4C 65 67 6F 20 53 65 72 76 65 72 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 36 30 37 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 43 6F 6E 74 65 6E 74 2D 4C 65 6E 67 74 68 3A 20 31 36 31 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 36 31 31 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 41 63 63 65 70 74 2D 52 61 6E 67 65 73 3A 20 62 79 74 65 73 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 36 31 35 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 58 2D 4E 57 53 2D 4C 4F 47 2D 55 55 49 44 3A 20 34 35 30 33 35 39 30 35 32 37 39 36 30 36 37 33 32 38 36 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 36 31 39 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 43 6F 6E 6E 65 63 74 69 6F 6E 3A 20 6B 65 65 70 2D 61 6C 69 76 65 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 36 32 33 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 58 2D 43 61 63 68 65 2D 4C 6F 6F 6B 75 70 3A 20 43 61 63 68 65 20 48 69 74 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 36 32 37 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 32 36 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 52 58 3A 20 27 27 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 36 6D 5B 33 38 35 36 33 30 5D 5B 44 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 33 32 31 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 63 6F 64 65 3A 20 32 30 30 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 36 6D 5B 33 38 35 36 33 33 5D 5B 44 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 33 32 34 5D 20 68 61 6E 64 6C 65 48 65 61 64 65 72 52 65 73 70 6F 6E 73 65 28 29 3A 20 73 69 7A 65 3A 20 31 36 31 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 36 6D 5B 33 38 35 36 33 36 5D 5B 44 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 36 34 32 5D 20 73 65 6E 64 52 65 71 75 65 73 74 28 29 3A 20 73 65 6E 64 52 65 71 75 65 73 74 20 63 6F 64 65 3D 32 30 30 0D 0A 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 36 6D 5B 33 38 35 36 34 30 5D 5B 44 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 34 36 30 5D 20 77 72 69 74 65 54 6F 53 74 72 65 61 6D 44 61 74 61 42 6C 6F 63 6B 28 29 3A 20 63 6F 6E 6E 65 63 74 69 6F 6E 20 63 6C 6F 73 65 64 20 6F 72 20 66 69 6C 65 20 65 6E 64 20 28 77 72 69 74 74 65 6E 3A 20 31 36 31 29 2E 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 36 6D 5B 33 38 35 36 34 34 5D 5B 44 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 33 39 33 5D 20 64 69 73 63 6F 6E 6E 65 63 74 28 29 3A 20 74 63 70 20 6B 65 65 70 20 6F 70 65 6E 20 66 6F 72 20 72 65 75 73 65 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 32 6D 5B 33 38 35 36 34 37 5D 5B 49 5D 5B 6D 61 69 6E 2E 63 70 70 3A 39 37 36 5D 20 68 74 74 70 5F 67 65 74 5F 66 75 6E 64 28 29 3A 20 5B 4E 45 54 5D 20 68 74 74 70 20 72 65 63 65 69 76 65 3A 20 6A 73 6F 6E 70 67 7A 28 7B 22 66 75 6E 64 63 6F 64 65 22 3A 22 35 31 39 36 37 34 22 2C 22 6E 61 6D 65 22 3A 22 E9 93 B6 E6 B2 B3 E5 88 9B E6 96 B0 E6 88 90 E9 95 BF E6 B7 B7 E5 90 88 41 22 2C 22 6A 7A 72 71 22 3A 22 32 30 32 34 2D 30 38 2D 32 30 22 2C 22 64 77 6A 7A 22 3A 22 33 2E 39 38 36 39 22 2C 22 67 73 7A 22 3A 22 33 2E 39 37 34 31 22 2C 22 67 73 7A 7A 6C 22 3A 22 2D 30 2E 33 32 22 2C 22 67 7A 74 69 6D 65 22 3A 22 32 30 32 34 2D 30 38 2D 32 31 20 31 35 3A 30 30 22 7D 29 3B 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 36 6D 5B 33 38 35 36 35 37 5D 5B 44 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 33 39 33 5D 20 64 69 73 63 6F 6E 6E 65 63 74 28 29 3A 20 74 63 70 20 6B 65 65 70 20 6F 70 65 6E 20 66 6F 72 20 72 65 75 73 65 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 37 6D 5B 33 38 35 36 36 34 5D 5B 56 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 32 35 32 5D 20 62 65 67 69 6E 49 6E 74 65 72 6E 61 6C 28 29 3A 20 75 72 6C 3A 20 68 74 74 70 3A 2F 2F 66 75 6E 64 67 7A 2E 31 32 33 34 35 36 37 2E 63 6F 6D 2E 63 6E 2F 6A 73 2F 30 30 33 30 39 35 2E 6A 73 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 36 6D 5B 33 38 35 36 36 34 5D 5B 44 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 33 30 33 5D 20 62 65 67 69 6E 49 6E 74 65 72 6E 61 6C 28 29 3A 20 70 72 6F 74 6F 63 6F 6C 3A 20 68 74 74 70 2C 20 68 6F 73 74 3A 20 66 75 6E 64 67 7A 2E 31 32 33 34 35 36 37 2E 63 6F 6D 2E 63 6E 20 70 6F 72 74 3A 20 38 30 20 75 72 6C 3A 20 2F 6A 73 2F 30 30 33 30 39 35 2E 6A 73 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 36 6D 5B 33 38 35 36 36 39 5D 5B 44 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 35 39 38 5D 20 73 65 6E 64 52 65 71 75 65 73 74 28 29 3A 20 72 65 71 75 65 73 74 20 74 79 70 65 3A 20 27 47 45 54 27 20 72 65 64 69 72 43 6F 75 6E 74 3A 20 30 0D 0A 1B 5B 30 6D 0D 0A 1B 5B 30 3B 33 36 6D 5B 33 38 35 36 39 38 5D 5B 44 5D 5B 48 54 54 50 43 6C 69 65 6E 74 2E 63 70 70 3A 31 31 37 30 5D 20 63 6F 6E 6E 65 63 74 28 29 3A 20 20 63 6F 6E 6E 65 63 74 65 64 20 74 6F 20 66 75 6E 64 67 7A 2E 31 32 33 34 35 36 37 2E 63 6F 6D 2E 63 6E 3A 38 30 1B 5B 30 6D 0D 0A
TEXT:[385583][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'HTTP/1.1 200 OK'
[385584][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'Last-Modified: Thu, 22 Aug 2024 01:01:42 GMT'
[385587][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'Etag: W/"915546da2ef4da1:0"'
[385591][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'Date: Thu, 22 Aug 2024 01:01:44 GMT'
[385596][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'Content-Type: application/x-javascript'
[385600][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'X-Powered-By: ASP.NET'
[385604][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'Server: Lego Server'
[385607][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'Content-Length: 161'
[385611][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'Accept-Ranges: bytes'
[385615][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'X-NWS-LOG-UUID: 4503590527960673286'
[385619][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'Connection: keep-alive'
[385623][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: 'X-Cache-Lookup: Cache Hit'
[385627][V][HTTPClient.cpp:1264] handleHeaderResponse(): RX: ''
[385630][D][HTTPClient.cpp:1321] handleHeaderResponse(): code: 200
[385633][D][HTTPClient.cpp:1324] handleHeaderResponse(): size: 161
[385636][D][HTTPClient.cpp:642] sendRequest(): sendRequest code=200

[385640][D][HTTPClient.cpp:1460] writeToStreamDataBlock(): connection closed or file end (written: 161).
[385644][D][HTTPClient.cpp:393] disconnect(): tcp keep open for reuse
[385647][I][main.cpp:976] http_get_fund(): [NET] http receive: jsonpgz({"fundcode":"519674","name":"银河创新成长混合A","jzrq":"2024-08-20","dwjz":"3.9869","gsz":"3.9741","gszzl":"-0.32","gztime":"2024-08-21 15:00"});
[385657][D][HTTPClient.cpp:393] disconnect(): tcp keep open for reuse
[385664][V][HTTPClient.cpp:252] beginInternal(): url: http://fundgz.1234567.com.cn/js/003095.js
[385664][D][HTTPClient.cpp:303] beginInternal(): protocol: http, host: fundgz.1234567.com.cn port: 80 url: /js/003095.js
[385669][D][HTTPClient.cpp:598] sendRequest(): request type: 'GET' redirCount: 0

[385698][D][HTTPClient.cpp:1170] connect():  connected to fundgz.1234567.com.cn:80
itldg commented 1 month ago

试了几个颜色,感觉不是很理想,改为切换到ansi的时候背景变为黑色,切换为text的时候再变回白色,你觉得这样如何呢

itldg commented 1 month ago

实现后的效果是这样的

image image

LiuGuoGY commented 1 month ago

也可以啊,挺好的。当然也可以让 Verbose 的颜色改成黑色也行。

itldg commented 1 month ago

推了,空了试试看

LiuGuoGY commented 1 month ago

可以了,感谢

itldg commented 1 month ago

没事,能帮到大家就好