Top 10 JavaScript Debugging Tips

I should let it be known just because, and I’ll go through this stage to clean the skeletons from my advancement storage room. Now and then, the enchantment I do — which some call “coding” — isn’t as impeccable as the result may appear to my partners when the brilliant outcomes are appeared to them. Truly, I said it – here and there, I utilize the old experimentation we as a whole call troubleshooting 🙂

For as far back as decade, one of my interests is front-end advancement (particularly javascript). As an expert, I love adapting new instruments of the exchange. In this story, I’m going to give you some wonderful tips for troubleshooting like a professional, utilizing the great old comfort.

Indeed, we as a whole know its essentials:

console.log(‘Hello World!’);/log a message or an item to comfort‘Something occurred… ‘);/same as support log

console.warn(‘Something unusual occurred… ‘);/same as support log yet yields an admonition

console.error(‘Something frightful occurred… ‘);/same as comfort log however yields a blunder

So ideally now, I can give you a few hints which you didn’t know previously, and which will make you a PRO debugger.

Tip #1 console.trace()

On the off chance that you need to know where the log is being incited from use console.trace() to get the stack follow with the logged information.

Tip #2 console.time() && console.timeEnd()

On the off chance that you are attempting to locate a subtle exhibition issue, start tallying time with console.time() and print with console.timeEnd().

Tip #3 console.memory

On the off chance that your exhibition issue is significantly trickier, and you are searching for a slippery memory spill, you may get a kick out of the chance to attempt to use console.memory (property, not a capacity) to look at your store size status.

Tip #4 console.profile(‘profileName’) and console.profileEnd(‘profileName’)

This isn’t standard, however is broadly upheld. You can begin and end a program execution device – execution profile from the code utilizing console.profile(‘profileName’) and afterward console.profileEnd(‘profileName’). This will assist you with profiling EXACTLY what you need, and keeps you from being mouse-click, timing subordinate.

Tip #5 console.count(“STUFF I COUNT”)

For a situation of repeating capacity or code, you can utilize console.count(‘?’) to keep tally of how frequently your code is perused.

Tip #6 console.assert(false, “Log me!”)

Truly, restrictive logging without wrapping your logs with if-else 🙂

You can utilize console.assert(condition, msg) to log something when the condition is falsy.

*disclaimer — in Node.js this will toss Assertion Error!

Tip #7‘group’) and console.groupEnd(‘group’)

In the wake of composing such a significant number of logs, you should arrange them. A little and helpful device for that is the and console.groupEnd(). Utilizing console gathering, your comfort logs are assembled, while each gathering makes another level in the order. Calling groupEnd diminishes one.

Tip #8 String substitutions

When logging, you can consolidate factors utilizing string substitutions. These references ought to be types (%s = string, %i = number, %o = object, %f = drift).

Tip #9 console.clear()

All things considered, having composed such a large number of logs, it’s currently time to clear your support a bit.

Tip #10 console.table()

Holding back something special for later, this is a genuine jewel as I would see it! You can really print an exceptionally decent table with the articles you log utilizing the console.table()

I truly trust these tips make your troubleshooting more gainful, and even somewhat fun!


jsHybugger – Javascript Debugger for Android

Maybe you already know how easy it is to debug web pages on your Android device with Google Chrome and the Remote Debugging feature. Unfortunately you can’t use this feature (maybe in future?) to debug a web page which runs inside a native app (within a webview component) or the default android browser! And now, what can you do, to track down your javascript errors? The normal approach is to insert a bunch of console.log() calls to your code and use logcat or a remote console tool to watch your debug statements and take some action. If you know this kind of developing, maybe jsHybugger would be an interessting tool for you!

jsHybugger implements the Chrome Remote Debugging Protocol as an android service. You can easily integrate the service component into your existing Android App to enable javascript debugging for webview components (you can also debug PhoneGap apps) or you can use the jsHybugger Debugging App (available over google play store or as APK) to debug web pages which runs in the default android browser.

jsHybugger 2.0 (coming soon)

  • DOM/CSS Inspection

jsHybugger 1.2 Features

  • View/Edit/Delete Local Storage
  • View/Edit/Delete Session Storage
  • View/Edit/Delete WebSQL Database
  • View page resources (images, scripts, html)
  • line / conditional breakpoints
  • watch expressions
  • step into/over/out
  • continue to here
  • break on exception
  • call stack navigation
  • local variable inspection
  • remote console logging
  • javascript syntax and runtime error reporting
  • save javascript changes
  • on-the-fly javascript instrumentation

Download JAR library 1.2.2

jsHybugger Debugger App

Just install the app and start debugging – no code changes needed to use jsHybugger with your web pages!

How does it work?

jsHybugger will intercept all resource requests for your web page, and will do an on-the-fly instrumentation of your javascript and html files. Javascript files, with the extension “.min.js” will not be instrumented and therefor not debug-able. If you use the non minified version of large libraries i.e. jquery, it’s important to start the app on the FIRST run (with jsHybugger) NOT in debug mode. The instrumentation will take some time (jquery about 10sec.), the instrumented files are stored in a cache and are used at next startup. File changes are detected automatically and will trigger an re-instrumentation of the file. jsHybugger will automatically starts a WebSocket-Server on port 8888 on your device. You can use Eclipse together with the Chrome-DevTools for Java or you can use the “Chrome Browser” on your notebook/desktop to access the debugging service on your smartphone.

Install Debugger App or Download Debugger App

Example Android App

You can build the example using maven or you can just download the example APK and start debugging (skip next lines and continue reading with “Connect chrome browser to mobile device”).

Go to jsHybugger/examples/webview and enter the following commands (see Maven-Build section for more info)

mvn clean install

# install APK file on device and start it
mvn android:deploy android:run

Connect chrome browser to mobile device

  1. use ADB tool and forward TCP port:
     adb forward tcp:8888 tcp:8888
     chrome browser: http://localhost:8888
  2. directly connect to your smartphones IP address
     chrome browser: http://<phone ip>:8888

You should now see the chrome webinspector and your loaded javascripts. Let’s set a breakpoint on line 32 and click the calculate button in the example. If everythings works, your debugger should stop automatically on the breakpoint.

Integrate jsHybugger into your app

  1. Add jshybugger-bundle/target/jshybugger-bundle-1.2.2.jar (download) file to your libs directory
  2. enhance AndroidManifest.xml
    <!-- JsHybugger needs network access -->
    <uses-permission android:name="android.permission.INTERNET" />
    <!--  jsHybugger webview content provider -->
    <provider android:name="org.jshybugger.DebugContentProvider"
    		  android:authorities="" />
    <!--  jsHybugger debug service -->
    <service android:name="org.jshybugger.DebugService"
  3. Connect WebView with Debugging-Service and prefix the url with content://
     // attach web view to debugging service 
     DebugServiceClient.attachWebView(webView, this);
  4. Ready to launch your app on the phone!
  5. Start debugging frontend (Chrome Browser) – see section “Connect chrome browser to mobile device”

Maven Build

  1. Make sure that the ANDROID_HOME environment variable is set and refers to your SDK installation.
  2. Build the complete system with the following command: mvn clean install