# Web Development in Mobile Welcome to our blog, where we explore the world of web development on mobile devices for individuals who, due to various reasons, may not have access to a traditional laptop. Discover how you can pursue your passion for coding and web development using the power of your mobile device. ### What is Web Development? Web development is the process of creating websites and web applications that can be accessed over the Internet. It involves designing and building the different parts that make up a website, such as the layout, colors, text, images, and interactive features. Web developers use programming languages like HTML, CSS, and JavaScript to write the code that brings these elements together and makes them work on web browsers. ### Code Editor There are several online code editors available for web development, each with its own features and advantages. If you don't want to use any of the online code editors then you can try using vs code on mobile here is a [blog link](https://www.codewithharry.com/blogpost/install-vs-code-in-android/) by Code With Harry. Else, Here are three popular online code editors: 1. CodePen ([codepen.io](http://codepen.io)): CodePen is a widely used online code editor that allows you to write HTML, CSS, and JavaScript code directly in your browser. It offers a live preview feature, collaboration options, and a vast collection of user-created projects for inspiration. 2. Replit ([replit.com](http://replit.com)): Replit is an online code editor and cloud-based coding platform. It supports multiple programming languages, including HTML, CSS, JavaScript, Python, and more. Replit provides an integrated development environment (IDE) with features like live collaboration, code execution, and project hosting. 3. CodeSandbox ([codesandbox.io](http://codesandbox.io)): CodeSandbox is an online code editor and development platform that provides a collaborative space for building and deploying web applications. Supporting various web technologies like HTML, CSS, and JavaScript. CodeSandbox is particularly popular for its utility in working with libraries and frameworks like REACT.js and NEXT.js, making it an ideal choice for developers working on modern web applications. 4. So on, a simple Google search can give some more options These are just a few examples, and there are many other online code editors available. The choice ultimately depends on your specific requirements and preferences. I prefer Replit because of 1. Integrated Development Environment (IDE) 2. Multi-Language Support 3. Collaboration and Sharing 4. Built-in Package Manager 5. Cloud-based Hosting ### The problem for learning web development in mobile Learning HTML and CSS in mobile has no problem, but learning JavaScript is somewhat of difficult task because accessing the console in a mobile environment can be a significant drawback when learning web development. The console is an essential tool for debugging and inspecting web applications, and its absence or limited functionality on mobile devices can make troubleshooting issues more challenging. The console is often used to log messages, test code snippets, and interact with the application during development. Without full access to the console, you may miss out on valuable feedback and insights that can help you understand and improve your Code. If you're using Replit for your projects, they provide inbuilt developer tools. However, it's important to understand how to access developer tools for other websites. ### Solution for above-mentioned problem To see the step-by-step process, I recommend following along with the instructions provided in the accompanying YouTube video [https://youtu.be/@bm9avan/dev-tools](https://youtu.be/8sUfN3JbaTM?si=VSeC7qgxTMjsOte2). Bookmark your current page(it might be any tab) by clicking the star ⭐ symbol from the chrome menu. After doing this, you should see a toast message `Bookmarked` with an **edit** button: Click the `edit` option and change the bookmark details to the following: #### Name: Mobile dev tools #### URL (copy and paste code below): ```javascript javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })(); ``` Now that you've saved the code, opening the developer tools is as simple as clicking on the search button. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694337761828/10136755-1a76-45cf-b6fd-7d49c43da534.png align="center") Type the name of the bookmark you've saved, in my case, it's 'Mobile Dev Tools.' As you start typing, you'll receive suggestions to select the bookmark. Just click on the suggested option. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694336837313/5ffee4b1-3945-4f99-a269-54adaa5ace55.jpeg align="center") Now, in the below photo, you can notice the Dev Tools icon in the bottom right, just click on that to see the magic. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694336850650/2885d862-fe0b-46c0-9b45-e08cdc6e044d.jpeg align="center") And there you have it—developer tools in the mobile browser's Chrome. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694336863763/4076ff1a-5c77-4972-9765-88dc0d860d62.jpeg align="center") While using this method, we encounter another issue: the console gets cleared when you open it freely. This means the website will render first, and then through bookmarks, you open Mobile Dev Tools. Mobile Dev Tools will display only the console log statements executed after opening the Dev Tools. If you refresh the page, you lose the Dev Tools and need to reopen them, facing the same problem. **KIWI BROWSER** Now, we understand that we can't rely solely on the above method. However, the [Kiwi browser](https://kiwibrowser.com/) comes to our rescue, offering built-in developer tools and extension support for mobile devices, which is fantastic. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694339166779/179582ff-c647-4659-9868-913c3e565e96.png align="center") I also recommend adding the [Mobile DevTools](https://chrome.google.com/webstore/detail/mobile-devtools/okfdckomkajiaeejefanbonnhppmplpo) extension to the Kiwi browser. After adding it, simply click on **Moblie DevTools** which can be found in the options menu located below the exit option. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1694339560150/96ce4024-9d8c-4a12-b217-26a3619ef9bb.png align="center") ## SUMMER Enhance your web development skills by using an online code editor like Replit for writing your code and the Kiwi browser for working with developer tools.