31

I am creating a purely browser based app - HTML and JavaScript.

I do not have an Android IDE installed (nor one for iOS) - and would prefer not to have to install one and perform remote debugging.

Developing on my PC, I use the Chrome browser and the developer tools to view the JavaScript console in order to debug.

How can I do that on an Android tablet (or, later, iOS)? I prefer a purely browser based solution, but could accept an Android/iOS based app.

Improve this question
8
  • 1
    weinre is not the easiest thing to set up and use but it's better than nothing Commented Sep 9, 2014 at 21:23
  • For iOS you need the device you want to debug, plug on a Mac running latest OSX (or latest -1), open Safari, enable Developer Mode and on developer options, pick the connected device to be debugged Commented Sep 9, 2014 at 21:24
  • 1
    For android you can set up remote debugging through chrome. Here is how to set it up. I have used it before it works perfectly. Commented Sep 9, 2014 at 21:27
  • This looks very good! Thanks. I will try it and get back to you. You might want to post your comment as an answer. It it works, as it should, then I would like to award you the answer (and worry about iOS later). Commented Sep 9, 2014 at 22:30
  • 3
    IMO the best answer for Android: stackoverflow.com/questions/2314886/… Commented Apr 15, 2017 at 11:58

5 Answers 5

Reset to default
31

Try https://github.com/liriliri/eruda

All you need to do is add this snippet on top of the page:

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

And you get an interactive set of developer tools similar to those in Chrome and Firefox. Here's a screenshot:

Eruda Screenshot

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This actually works
To add: it works, AND is multi-platform and multi-browser!
Works for me on Android, Windows. I inserted these lines just before my HTML includes JavaScript files. Now I just have to figure out what is causing the HTTP error 500 it is reporting...
17

For Android you can use remote debugging through chrome as described here

I'll summarize/rewrite the steps (for browser based debugging) here in case the link ever goes down.

Requirements:

  • For browser tabs: Android 4.0+ and Chrome for Android
  • A USB cable to plug in your Android device
  • Chrome 32 or later installed on your development machine

Set up:

  • Enable USB debugging on your device.
  • Navigate to chrome://inspect/#devices on your desktop Chrome browser. (Alternatively, to get to the same screen, you can select Chrome menu > Tools > Inspect Devices)
  • After connecting, you may see an alert on the device requesting permission for USB debugging from your computer. Tap OK
  • Chrome should now display the connected device
  • Open up chrome on your Android device and navigate to the page you want to debug/inspect. The page should show up on your desktop browser and you should be able to inspect it.

If for some reason you have an older version of chrome and cannot upgrade. There is a plugin that you can install to accomplish the same thing.

Improve this answer

1 Comment

I finally got this working, But only works on S20, not on S24.
17

Just released for iOS, Chrome 73 now supports the option to see console.log.

If you’re a website developer, you can now view JavaScript console messages. Navigate to chrome://inspect to enable, then perform desired actions in another tab. Switch back to the same chrome://inspect tab to view any printed JavaScript console logs.

see here in "What's New" section or in "version history" 73.x version.

Improve this answer

Comments

2

I was searching for a while for something like this. Firebug Lite used to be an option but has been abandoned. Before discovering eruda (as mentioned elsewhere in this thread), I developed my own open source console. It's pretty light on features, but it does the main things - capture JS errors, and allow you to run commands to inspect variables and object on your page.

Here's a demo:

It's activated by just placing this script tag on your page:

<script src="https://cdn.jsdelivr.net/gh/SimonEast/MiniConsoleJS@main/console.js"></script>

Open source, GPL licence. Available at: https://github.com/SimonEast/MiniConsoleJS/

Improve this answer

Comments

0

For iOS

This answer is to help people who stumble upon this question.

Staring from Chrome 115, we can debug the webpage loaded in iOS chrome using safari developer tools in Mac.

  1. Connect mac and iOS device with cable
  2. In Mac, open Safari -> Preferences -> Advanced and check the Show Develop menu in menu bar checkbox
  3. In iOS device, open Chrome -> Settings -> Content Settings and enable Web Inspector option.
  4. Navigate to the page you want to debug in iOS chrome browser
  5. In Mac, open Safari -> Develop menu -> cursor over the iOS device name and it will show the open tabs to debug

Note: Make sure your iOS device stays unlocked

Requirements:

On your iOS device you need:

iOS 16.4 or greater.

Chrome 115 or greater.

source: https://developer.chrome.com/blog/debugging-chrome-on-ios/

Connecting mac and iOS device:

https://webkit.org/web-inspector/enabling-web-inspector/

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.