How to debug remote v8-based application using Chrome Dev Tools - javascript

v8 has its own JSON based remote-debugging protocol and two UI debuggers:console application D8 and a eclipse plugin(hosted at http://code.google.com/p/chromedevtools)
Chrome use WebKit Remote Debugging Protocol including Console, DOM Debugger, ..., Debugger
"WebKit Remote Debugging Protocol" is a Google Chrome/Chromium debug protocol. You will find its description at http://developers.google.com/chrome-developer-tools/docs/remote-debugging
So is it possible to use the Chrome Dev Tools ships with chrome to debug remote v8-based application?

Try Node Webkit Agent for NodeJS version >= 0.6
Node-inspector is for NodeJS version 0.4
The setup need to be set in your node server and access the URL provided by the library base on your node version. You cannot use Developer Tools in Chrome directly.

node-inspector is designed to do exactly what you ask.
It seems that it competes with Node Webkit Agent. I haven't tried webkit agent yet as it seems newer and it failed to install without some meddling. node-inspector worked for me, and fairly well, although there is a bit of latency from running a statement to getting the output marshaled into Chrome's debugger. Overall, it's an extremely useful tool.

Related

How to debug JavaScript errors when running a Cordova App on Android TV

I have written a Javascript script which I bundled into an Android app using Cordova.
The code is written in ES6 and is transpiled into ES5 using Babel and Webpack.
The app is intended to run on a simple TV, so I am using MK809 Android dongle to transform a TV into an Android-based TV. Then I install the new app and try to run it.
The problem is that the app terminates immediately (most probably due to some ES5 errors as the transpilation is probaby not complete or correct).
Is there a way this can be debugged?
When I run it on my computer's Chome, everything works perfectly as it has full ES6 support. The app also runs perfectly on my Android phone as it uses a modern browser which supports ES6.
I am not a FE guy, so my knowledge is a bit limited.
Can anyone suggest the best way to debug this? How can I run a local copy of a brower with ES6 disabled so that I could easily spot the problem?
Thank you
The only I see you could achieve this would be to root this Android dongle and install something like ADBWifi so you can debug it through Chrome/ADB over your local network. This is what I do for ChromeOS devices, not too sure if it's doable with your device...
I found out that using a service like errlog.io gives me what I need.
JavaScript errors get captured and sent to the their service and then are accessible on the dashboard
see: Get Started with Remote Debugging Android Devices
the MK809 dongle has an USB port and it would need to have USB debugging enabled.
then go to chrome://inspect on the computer's Chrome, in order to access the debugger.
logging and debugging is something very else; that dongle actually is a Rockchip RK3066.

How to debug Node.js with Firefox?

I'm aware of how to access the Chrome Dev Tools with Google Chrome to debug Node.js applications: just go to about://inspect.
I encountered a line of text on MDN mentioning that Firefox could be used for Node.js applications, but going to about://inspect in Firefox doesn't work. I'd like to know how this would be done in Firefox, if it is indeed possible.
Because Firefox uses a different Javascript engine (Gecko) than Node.js (V8), it's impossible to use the Firefox dev tools to debug Node scripts. As of this post, MDN says as much in their "Remote Debugging" article:
You can connect the developer tools to Gecko-based runtimes...
https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging
There's a tool called node-firefox that you can use for that, you can download it from:
npm install node-firefox
Here's the source code: https://github.com/mozilla/node-firefox
And a introductory guide: https://hacks.mozilla.org/2015/02/introducing-node-firefox/

What is a good headless browser to run with protractor?

New User here.
After hours of building my smoke and regression tests, I found out after reading many cases online that phantomjs is known to be a trouble to run with protractor. Jenkins has been running phantomjs for all the tasks it has been given so far.
They need these tests to run as part of ci which does not have a windowing system installed.
So I would appreciate it if there is a recommendation for completely headless browser or a headless chrome(that would be most beneficial) and a step by step to set it up. I already have a conf.js and a e2e.conf.js file. My code works perfectly fine with chrome.
I am on a iMac and selenium webdriver, I believe.
Edit: Problem = protractor doesn't work with phantomjs.
What I have done = use different web elements and googled if anyone has faced a similar situation. Also googled for headless browsers that worked for protractor, unable to find a suitable solution.
If anyone reached here - the answers are outdated.
Chromium (on next release) now supports headless mode. no need to work hard.
You can read more here:
https://developers.google.com/web/updates/2017/04/headless-chrome
Here is an example from command line
chrome \
--headless \ # Runs Chrome in headless mode.
--disable-gpu \ # Temporarily needed for now.
--remote-debugging-port=9222 \
https://www.chromestatus.com # URL to open. Defaults to about:blank.
And you can simply trigger protractor with capabilities for chrome:
Activating chrome language flags when activating from protractor (selenium)
Here is the configuraiton I am using
capabilities: {
'browserName': browserName,
chromeOptions: {
binary: '/Users/guymograbi/Downloads/chrome-mac/Chromium.app/Contents/MacOS/Chromium',
args: ['--headless','--disable-gpu']
}
},
Update - new versions of chrome doesn't require binary property
In my environments I found I can remove the binary property as new version of chrome is available on stable branches
My protractor configuration is
capabilities: {
'browserName': 'chrome',
chromeOptions: {
args: [ '--headless', '--disable-gpu', '--no-sandbox', '--window-size=1920x1200' ]
},
},
And it works smoothly for weeks now. highly recommended.
Update - how to do this in karma is super easy
Using headless chrome in karma is super easy:
browsers: 'ChromeHeadless'
it should work with the chrome loader and everything. more info
Your best bet is to continue with Chrome. With a bit of work you can get it to work via a CI and in a headless manner - we do this using Jenkins and Docker Ubuntu servers which are headless.
You will need to configure Chrome to run headless using XVFB. You can start off by following the gist here https://gist.github.com/addyosmani/5336747
You state you are on a Mac so you can either run the headless tests via Docker on your machine or you could set up a second config for the CI tests.
Another resource http://tobyho.com/2015/01/09/headless-browser-testing-xvfb/
I would continue testing in normal browsers with a head, but would use a remote selenium server as a service - Sauce Labs or BrowserStack, see:
Integration Testing with Protractor, WebdriverJS and Sauce Labs
Running Protractor tests on Browserstack Automate
automate-node-samples
You could run your Protractor tests against CodeShip or Drone.io, both of which offer Chrome and/or Firefox running headless for free. No really...
If you've got Chrome 59+ installed, start Chrome with the following flag:
--headless
please let me know if you need more help, will write the config for you :) enjoy

Dev Tools for Native Android Browser

I haven't done much development for Android, and I am looking to debug some JS/CSS in the native Android Internet browser (Version 4.1.2). So far, I have found the ADB extension for Chrome on Android, but not much in the way of the native browser.
I am seeing some strange anomalies in my JS/CSS appear in the native Android browser that I do not see in the Chrome browser or on iOS devices.
I'm looking for guidance/recommendations/suggestions/tools that I can use for debugging JS/CSS on the native Android browser.
Thanks!
You can use the jsHybugger App to find your JS/CSS anomalies. Just install the APK on your device and use the ADB extension for Chrome on your desktop to debug your webpage. The jsHybugger App acts as a proxy between the native Android Browser and your webserver, and enables you to debug your page.
The software is not free but there is a cheap shorttime license available.
https://www.jshybugger.com

chrome.serial not available in Chrome packaged application

I'm building a Chrome packaged application with an Arduino serial connection. Similar to what was demonstrated in the latest Google I/O, The Next Evolution of Chrome Apps by Erik Kay, and Mihai Parparita.
I'm using the latest Canary build (23.0.1254.0) on OS X 10.8 (Mountain Lion).
However, the 'chrome' object is missing the 'serial' member.
The 'serial' permission is missing from the manifest.json :
"permissions": ["serial"]
I've successfully connected to serial from a packaged plugin designed to work with arduino however for compilation of code requires a server.
Then Chrome plugin is here:
https://github.com/DecodedCo/ArduinoInTheBrowser

Categories