We need a new browser
Dipankar Shaw

Dipankar Shaw @dshaw0004

About: 426 Upgrade Required

Joined:
Dec 31, 2022

We need a new browser

Publish Date: Sep 20 '23
17 17

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

Comments 17 total

  • OpenSource
    OpenSourceSep 20, 2023

    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.

  • Red Ochsenbein (he/him)
    Red Ochsenbein (he/him)Sep 20, 2023

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

    • Jake Lundberg
      Jake LundbergSep 20, 2023

      i actually wrote a blog post about this very recently!

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

      • Dipankar Shaw
        Dipankar ShawSep 21, 2023

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

    • Jon Randy 🎖️
      Jon Randy 🎖️Sep 21, 2023

      ...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.

      • Dipankar Shaw
        Dipankar ShawSep 21, 2023

        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.

  • Ari Sunarya
    Ari SunaryaSep 21, 2023

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

    • Dipankar Shaw
      Dipankar ShawSep 21, 2023

      thank you
      now no need to make a new browser

  • CitronBrick
    CitronBrickSep 21, 2023

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

    1. MathML support
    2. Mouse Shortcuts like in Vivaldi
  • Heloisa Moraes
    Heloisa MoraesSep 21, 2023

    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 ;)

  • Gabin Lefranc
    Gabin LefrancSep 21, 2023

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

  • leob
    leobSep 22, 2023

    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.

Add comment