DEV Community

Cover image for We need a new browser
Dipankar Shaw
Dipankar Shaw

Posted on • Originally published at dshaw0004.netlify.app

We need a new browser

Yes you read right, we definately need a good mobile web browser for developers because there isn't any. You might say that there is a good mobile browser, Google Chrome.

Google Chrome does give us access to new css and js asap but I want different things and Chrome does not provide those features.

What features do I want ?

The features I want are present in all browser but only for desktops not for mobiles.
Those are

  • developer mode
  • inspect element
  • console

What feature does mobile browsers offer ?

None of the above

Some mobiles browser have few special features that could be helpfull for developers but they does not provide any of the above features.

What I am thinking to do

You might guessed it. I want to create a new open source browser for mobiles.
Which will at least provides 1 specific feature of inspecting elements (HTML & CSS).
After that adding console support and other features to it (if possible)

What's the problem

This project have few probloms. First of them is myself.

I don't know how can I make a web browser. My first thought was creating a website which will take input of url from the user then fetch it and set it to innerHTML of a div element.
something like this

<body>
    <header>
        <form>
            <input type="text" placeholder="enter url" name="browserInputBar" /><input
                type="submit"
                value="search"
            />
        </form>
    </header>
    <main><div id="display"></div></main>
    <script type="module">
        const form = document.querySelector("form");

        async function fetchData(query) {
            const res = await fetch("https://" + query);
            const data = await res.body(); // I was checking this
            /* I don't know what to use for HTML response .text, .json, .blob, .body or anything else*/
            return data;
        }

        form.addEventListener("submit", (e) => {
            e.preventDefault();
            const query = form.browserInputBar.value;
            const data = fetchData(query);
            document.querySelector("#display").innerHTML = data;
        });
    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

But this is not working. I am getting CORS error.

I want your help to create the best browser for developers

Here is the link to GitHub repo developer-browser

My aim

My aim is to create the best mobile web browser for mobile devices

Top comments (16)

Collapse
 
syeo66 profile image
Red Ochsenbein (he/him) • Edited

Remote debugging is actually a thing... it allows you to use your developer tools to inspect the site loaded on the mobile browser.

Collapse
 
jonrandy profile image
Jon Randy 🎖️

...and also a much better option than trying to use developer tools on a tiny screen with your fingers. This is almost certainly why they didn't build the devtool UIs for mobile in the first place - it doesn't make a great deal of sense.

Collapse
 
dshaw0004 profile image
Dipankar Shaw

I want this features for another reason. I do know about mobiles debugging. I sometimes use that.

I am into some web scraping lately. I need to check all of my targeted website whether they have the data I want easily accessible or not.

For example youtube's website does not use video element to display the video also few other video websites do use video element to display the video but they have CORS so no one can access their video direct through the video url.

I want this kind browser so that I can check their code while I am outside I don't have access to my pc.

Thread Thread
 
syeo66 profile image
Red Ochsenbein (he/him)

So, you don't want a better mobile browser... you want a dodgy browser...

Thread Thread
 
dshaw0004 profile image
Dipankar Shaw

dodgy browser is this name of the browser

Collapse
 
wraith profile image
Jake Lundberg

i actually wrote a blog post about this very recently!

dev.to/wraith/a-mobile-bugs-life-4g2d

Collapse
 
dshaw0004 profile image
Dipankar Shaw

I know about this but I will read you blog for more knowledge.

Collapse
 
leob profile image
leob

Use chrome://inspect and debug it from your desktop via a USB cable - MUCH more practical than a browser dev console on your tiny mobile screen would be ...

Heck, I'm even using chrome://inspect often not just to debug but also to simply interact when testing sites and apps on my phone - it's so much easier from a desktop machine.

Collapse
 
opensourcee profile image
OpenSource • Edited

Hey! Good take. I’d try making it an extension for Chrome and finding a way to use it in mobile. It appears that Chromium-based browser, like Kiwi Browser or Yandex, allow such extensions. Or making your own chromium based browser.

Collapse
 
peerreynders profile image
peerreynders

iOS 17 is out and I have yet to hear that non-WebKit browsers are a thing yet as was predicted earlier this year.

Collapse
 
dshaw0004 profile image
Dipankar Shaw

thank you

Collapse
 
heloisamoraes profile image
Heloisa Moraes

Hey Dipankar, that sounds like a cool project! In case you're interested, applications are still open for the Codacy Pioneers, where we're looking for the most innovative OSS developers to support through sponsorship, mentorship, free tools and free publicity. We want to give back to the community and excited to share these developer stories with the world.

Apply until September 29th ;)

Collapse
 
arisunarya profile image
Ari Sunarya

i use kiwi browser on android, it has devtools that google chrome have on desktop version

Collapse
 
dshaw0004 profile image
Dipankar Shaw

thank you
now no need to make a new browser

Collapse
 
citronbrick profile image
CitronBrick

There are 2 features that I'd like in a new (or not) browser.

  1. MathML support
  2. Mouse Shortcuts like in Vivaldi
Collapse
 
imgly profile image
Gabin Lefranc

Something that miss a lot on mobile is the ability to customize web experience with extensions and plugins.