How can I clone the chrome's inspector feature in my web application?

Question

1.00/5 (1 vote)

See more:

I pretty much want to make a website that allows users to paste a link to any webpage and be able to see a preview of that page together with the html code behind it (just like you would use 'Inspect' in google chrome). The tricky part is making the following key feature: when the user hovers over an element on the preview of the webpage, it should highlight the html code responsible for it, and further identify which element did the user click on if he performs that action at all.
How would you go about implementing this?
I also want to use only Django with templates, if that impacts the approach at all.

What I have tried:

I searched online but found pretty much nothing related to building such a tool

Posted 11-Jul-23 8:55am

AlexandruCrisan

Updated 11-Jul-23 11:03am

Add a Solution

Comments

Dave Kreskowiak 11-Jul-23 19:01pm

Question: Why would you do this when anyone can just go to the site they're interested in and just hit F12 in their browser?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Accepted Answer · 2023-07-11T11:03:00

Basically, you'll have to write (or clone from Chromium) a new browser that lets you interact with the elements. You can embed a web browser in applications in some languages (.NET allows it pretty easily) but without access to the internals of the browser code that's not going to help you.

Is this a job I'd take on? No. It'd take too long, and be too frustrating I suspect.

[edit]
As an update, I found this:

Chromium | Microsoft Wiki | Fandom[^]
The Chromium browser codebase contains about 35 million source lines of code.

You're probably going to have to understand maybe half of that ... big job! :D
[/edit]