CODEWITHSUNDEEP
javascriptandroidiostestingmobile
Juvenik
Juvenik

Reputation: 950

Test Javascript in mobile browser

I have written a plain JavaScript code that will run on different Desktop and on Mobiles.

For Desktop, I can just open the browser console and test my JavaScript code. But how can I test for mobile devices. My code is mostly failing for mobile devices which I am able to figure out when I check the user agent.

Here is a simple piece of code, that extract word counts from a web page.

function countWords() {
    try {
        if (top.document && top.document.querySelector("body")) {
            var _body = top.document.querySelector("body");
            var words =  _body.textContent || _body.innerText; //For old firefox, innerText does not work
    
            if (words) {
                words = words.replace(/\n/g,'');
                var filteredWords = words.match(/\S+/g);
                if (filteredWords && filteredWords.length > 0) {
                    userDetail.wordCount = filteredWords.length;
                }
            }
        }
    } catch (err) {
        processError("countWords", err);
    }
}

This code is not working on on mobile devices.

Upvotes: 0

Views: 4354

Answers (3)

Sowmiyan S
Sowmiyan S

Reputation: 11

You can actually open Console/Inspect element on mobile devices!

You need "chrome" for this to work.

javascript:(function () { var script = document.createElement('script'); script.src="//cdn.jsdelivr.net/npm/eruda"; document.body.appendChild(script); script.onload = function () { eruda.init() } })();

Just create a new bookmark and name it whatever you want, in the url part enter this above 👆 code and that's it!!

Now whenever you want to access Console in your mobile browser tap on the address bar and search for the bookmark that we just created.

Let's say that we named it as "Inspect Element" , If we type "Inspect Element" on the address bar our bookmark will appear, click on it to run the javascript , after few seconds your "console toggle button" should showup click on it to access the console/Inspect Element on your mobile browser.

Ok, let me give you a detailed step by step procedure for this.

•Create a new bookmark.

create new tab

•Click on the three dot button on the top right corner and click on the "star" button on the top right of the side bar,to create a new bookmark.

create a new bookmark

Edit it

•After Pasting the javascript code in the url section hit back button and search for Inspect element in the address bar.

Search Inspect element

•Click on the Inspect Element bookmark to run the javascript and you can see the console toggle button in the browser.

Toggle console button

•Click on it to open the Console!

Console

Console window

Console window

•You can enable the console in any website you want.

•Just go to the website and tap on the address bar and search for Inspect Element and press on it , console toggle button should showup.

•I hope this helped someone if so feel free to upvote ☺️.

Upvotes: 0

Vilmantas Bašinovas
Vilmantas Bašinovas

Reputation: 35

To debug Javascript code (or just browser stuff in general) You need OS X and an iOS device (you should be able to do the same with the iOS Simulator, but I couldn't get it working and I mainly use a device to debug stuff, so didn't bother to figure it out). There's a feature to attach a web inspector to your browser window in the iOS device.

To enable it:

  1. Device -> Settings -> Safari -> Advanced -> Enable Web Inspector
  2. OS X -> Safari -> Develop (top bar) -> Choose your device from the dropdown menu -> Select app running JS code.

The web inspector should show up, if everything is ok. From there you should be able to debug your JS code.

EDIT:

This is for debugging iOS devices (useful if you want to support mobile Webkit).

Upvotes: 0

TrojanMorse
TrojanMorse

Reputation: 642

As mentioned above by, you can use a mac and IOS device, another option is Remote Debugging for android if you want to go that path - https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

It's very handy and easier to get your hands on

Upvotes: 2

Related Questions