Hỏi cách viết tool inspector giống dev-tool trên các trình duyệt

Mỗi trình duyệt có một devtool khác nhau. Chromium devtools tất nhiên khác với firefox devtool.
Theo mình biết devtool của chrome được xây dựng cùng với chromium luôn chứ không phải như addon thêm vào nên muốn viết một cái tương tự là không thể.

Lắng nghe sự kiện mouseoever và mouseout là được
Ví dụ = JS (jQuery)
https://jsfiddle.net/d4waubhd/
Chưa tìm cách highlight được margin do mình chưa search ra và còn hơi lỗi chút.

Ngoài ra bạn tham khảo thêm: https://github.com/firebug/firebug

Mình chỉ cần viết một chức năng có trong dev-tool là inspectort thôi. Khi click sẽ lấy được thông tin của phần tử, sự kiện của phần tử đều bị chặn hết.

À, vậy mà cứ tưởng làm một cái devtool thứ 2. Sorry.

Nhưng cách của bác là mình thêm mã vào trong trang. Kiểu mình là không tác động gì tới trang đó, nhưng vẫn thực hiện được chức năng như trên.

À bạn muốn làm như trang này đúng ko
https://www.youtube.com/watch?v=HJI1qzn1Od4

Cái parsehub là web-browser rồi. Nên bạn có thể tùy chỉnh nó và làm một devtool tương tự như Google hay Firefox rồi thêm tính năng clawer vào. thằng parsehub này build trên nền firefox. Nên nó lợi dụng devtool của firefox thêm tính năng clawer vào rồi tùy chỉnh giao diện lại.

Mình đang thực hiện phần phần tính năng giống Parsehub. Nhưng bí phần chọn phần tử quá . Bác có document nào nói về nói ko “Nên nó lợi dụng devtool của firefox thêm tính năng clawer vào rồi tùy chỉnh giao diện lại.” cho mình xin với

Hoặc chức năng tương tự như trang dexi.io

image.png1366x622 132 KB

1. Như parsehub, thì bạn phải tự đọc source của firefox or chrome rồi tự custom. Vì cái này thường ko có document.
2. Như dexi.io, tìm hiểu sơ thì mình thấy bản chất của nó là dùng backend tải html về. Sau đso đưa lên cho client + inject script vào thông qua blob và iframe.

blob

kỹ thuật này là gì vậy bác. Mình chỉ có biết blob trong database thôi.

Bạn tham khảo nè:

https://developer.mozilla.org/en-US/docs/Web/API/Blob
https://www.javascripture.com/Blob