We Keep Coding

Testing Angularjs locators

Kind of getting desperate here.
I have a legacy testsuite using AngularJS (5.4.1) driven by Node 8.12.0.
I want to debug some tests but it seems impossible.
Control flow is enabled in the tests, so I followed the docs on the protractor website. Sadly, it does not work.
browser.pause() just get skipped and using browser.debugger() is deprecated from Node 8.
I decided to disable the control flow but I ran into another problem.
We go to a login page before accessing the application, and the angular debugger does not like that. When accessing the non-angular page, the debugger just quits, stating that angular is not defined.
I then turned to Google to see if there are any Chrome extensions that enable me to use the dev tools to test the locators, but to no avail.
Would be great if I can get the debugger working.
Thanks in advance.
Regards

Here is a setup for IntelliJ
(working directory is example)

What are the pros and cons of Chrome Apps compared to Electron?

I want to program a desktop app in javascript (with web technologies) and looked for a comparison between Electron and Chrome Apps.
Everything I need seems to be possible with Chrome Apps, but there's a big hype around Electron/NW.js. What are the advantages of Electron? Is it due to the large amount of Node packages?
I think the functional differences are clear to me.
Pros and cons like:
+ Chrome Apps can run on Chrome OS
- Chrome Apps needs an installed Chrome Browser
...
UPDATE 2016-08-20:
As Eduardo pointed out, Google announced that they'll discontinue Chrome Apps for all platforms except ChromeOS. So I think the answer to this question is obvious now.
For all of you who developed a Chrome App and are interested in migrating it to the web here's a guide from Google: https://developers.chrome.com/apps/migration
Or, as Google also mentioned, you migrate it to Electron or NW.js.

You can totally compare electron and chrome packaged Apps. They are very similar. For both of them you get:
Develop your Desktop App using Web Technologies
App runs on top of Chrome
Automatic updates. Though in Chrome you get it for free, for Electron you need to do some work.
OS Integration - Both have better integrations with the OS than a normal website, but Electron supports a wider range of OS integration.
Work offline or online.
Both work on Linux, OSX and Windows. Chrome Web Apps also work on Chromebooks.
Here are the differences:
Electron uses node.js. So you can import many modules not easily available in Chrome Apps.
Distribution, with electron you package and distribute the app yourself. With Chrome Apps you distribute them through Chrome Webstore.
Environment. An Electron App is packaged with its full environment. Chrome Apps just use Chrome environment so they are lighter, but may behave differently for different users depending on the Chrome version they use.
Chrome Apps require the user to have Chrome installed, Electron doesn't.
Electron has better developer tools for testing and debugging.
Electron is an open source platform. Chrome Apps is also built on top of multiple open technologies but specially distribution is controlled by Google.
Electron documentation is much better even though it's a much younger platform.
Adoption: There are quite a lot of big and successful apps built on top of Electron such as Visual Studio Code, GitHub client, Slack. Chrome Apps just never picked up as much momentum.
Chrome Apps can be tightly integrated into Google Drive
UPDATE 2016-08-19:
It seems Google recently deprecated Chrome Apps on any platform other than ChromeOS. So I'd say it's no longer a valid option.
http://blog.chromium.org/2016/08/from-chrome-apps-to-web.html

I think it is not really possible to compare electron and chrome-apps. It depends on, what your program should do.
So, when should I use electron?
On the first look electron looks like chrome, because the views of electron is based on the chrome browser. But electron is a full node.js environment with a chrome view on top. So the powerful features are not just insight the chrome part.
Like you mentioned there are a lot of node modules (over 1.700.000), which you can very easy install or update. You should also take a look at the node.js api (https://nodejs.org/api/). All that allows you to write complex apps, which are fully integrated on your desktop. For nearly all problems are some modules available.
With node you can first make your program with a command line interface and after that you can use electron to make a gui.
So, when you already have a online app which is written in JS, maybe a chrome-app is better. Chrome-apps are great for a google drive use. Or if you want to have a full integration in chrome-os.
So my pros for electron:
more than 1.700.000 modules over npm available
very easy integration of jQuery, Angular, React, ...
first make a program with a CLI and then make a gui
works perfect with github
very good desktop integration
provide windows installers

I would like to chime in on Electron vs nw.js.
I have a very popular Chrome App which cannot be converted to neither a web app nor an extension because it uses several unsupported APIs, most notably the chrome.fileSystem API.
The app is still only accessible on Chrome's webstore since app support will be abandoned not before early 2018. Nevertheless, I have already spent lots of thoughts and time on deciding what to do about Google's move.
Until now I have been mainly aiming at Electron since that seems to get most attention, but I have just recently found that nw.js can actually run Chrome apps out of the box because it implements all Chrome's APIs whereas Electron only implements a subset of them.
Simply run your Chrome app like this:
/path/to/nw.exe <folder path of the manifest.json file>
Except for a very few things such as intercommunication between my app and a helper extension, everything works as expected with zero changes even though it is an advanced app with nearly 3000 lines of JS code.
For new cross platform apps, Electron might be the better choice (I have actually no idea) but for existing Chrome apps I would say that nw.js is really something you should consider.
Hope this can help someone in the same position.

Development Mode requires the GWT Developer Plugin

My project using GWT. I haved installed GWT plugin for my Chrome Browser before . I am using the newest version of chrome .When run the project, Chrome browser alway announce
Development Mode requires the GWT Developer Plugin
I have attached the image bellow
But when I click to the link. Chrome browser go to page of plugin in the Chrome web Store. But it announce me that my chrome browser haved installed this plugin. I have attached the screenshot bellow
How can I make GWT plugin work with my project ?
Thank for any help

From GWT Website ,http://www.gwtproject.org/release-notes.html#Release_Notes_2_6_1
GWT Development Mode will no longer be available for Chrome sometime in 2014, so we improved alternate ways of debugging. There are improvements to Super Dev Mode, asserts, console logging, and error messages.
This is because of newer chrome version.Use Super Dev Mode
Other Solution is you can enable NPAPI which was disable in chrome 42 version follow the below steps
1.Open New Tab and Enter chrome://flags/#enable-npapi
2.Enable this Enable NPAPI Mac, Windows
3.Then bottom of the page click "Relunch" button.

I had the same issue this morning.
Switching to super dev mode:
select your project in the Project Explorer -> Debug as -> Web Application(Super Dev Mode)
Console will say:
The code server is ready.
Next, visit: http://127.0.0.1:9876/
Do so and follow instructions there.

Quick recap: Firefox nuked APIs that DevMode needed in 27.0, more than a year ago; Chrome announced approximately at the same time that they were deprecating NPAPI, that DevMode needs. They first made it impossible to update extensions containing NPAPI plugins in the Chrome Web Store a year ago, then they removed NPAPI support on Linux, and now they've just disabled NPAPI in Chrome 42, and will remove support entirely in 45, to be released in September.
"Classic" DevMode is deprecated for nearly 1½ year now; it really is time to move to SuperDevMode!

It's very likely that you are following word for word the instructions from Google at this link.
https://developers.google.com/eclipse/docs/getting_started
The instructions are out of date, and not valid for current versions of chrome.
Instead of selecting the option
Debug As > Web Application
use the option
Debug As > Web Application (GWT Super Dev Mode)
Google has "given up" on keeping their documentation up to date. I can only imagine how difficult it must be to ignore so many complaints.

From GWT Website ,http://www.gwtproject.org/release-notes.html#Release_Notes_2_6_1
GWT Development Mode will no longer be available for Chrome sometime in 2014, so we improved alternate ways of debugging. There are improvements to Super Dev Mode, asserts, console logging, and error messages.
This is because of newer chrome version.Use Super Dev Mode

NPAPI can be re-enabled in Chrome but it is going away.
Super dev mode supposed to be the way forward but I prefer the classic dev mode.
I'm using Windows. I installed a version of Chromium to stop this being a problem for me. The version I found to be the last of the 41 series was build 310958 which can be obtained here:
https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win/310958/
You need to download the mini_installer.exe file. This version of Chromium will never update itself.
I recommend also that you make a copy of the GWT Developer Plugin that you can install without using Google's store because I believe it will be removed soon. I don't know how to do that, but one member of my team claims to have done it.

This issue is there, as Google has now completely discarded NPAPI which is required by GWT developer plugin which can been seen here:http://blog.chromium.org/2013/09/saying-goodbye-to-our-old-friend-npapi.html
Google now provides "Super Dev Mode" which does not require NPAPI.
For utilizing that you can check this blog: https://www.sencha.com/blog/getting-started-with-gwt-super-dev-mode/

Firefox Portable 26.0 supports the GWT Developer Plugin needed to work with Classic Dev Mode. You can install that along side an up-to-date browser.
For some reason, Super Dev Mode still does not work with some projects. This workaround has worked best for our team.

To get it working on Mac: download this version (Version 38.0.2084.0 (281482)) and install the plugin from the Chrome Web Store.

I did the same thing as suggested by davtom and it worked. I download the chrome-win32.zip file from https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win/310958/ . I unzipped the files in a temp folder and run chrome.exe from there.
Thanks Davtom. This problem was driving me nuts for the past 3 hours. I rebooted, installed a different JDK, uninstalled and reinstalled the plugin but nothing worked.

To overcome this problem, Install very old version of chrome version 10 and run the app in super-dev mode. It would run as it should. There is no requirement to install GWT plugin for this version of chrome.

how to calculate amount of angular bindings which was made on a page

I implementing angularjs application and need to know, how much angular bindings I currently have on my page. How can I calculate it?

From a debug/understanding/performance point of view, I recommend you try out the AngularJS Batarang Chrome Extension. You install the extension, load up your angular application in Chrome, hit F12 to bring up developer tools, and then go to the "AngularJS" tab that the extension creates. The Performance page specifically will tell you about your bindings - it lists out all of your watch expressions and how long they are taking to calculate.

adding functionality to chrome developer tools

I'd like to add functionality to chrome's developer tools.
In particular it would be nice to have a most used files option to the list of scripts I'm looking at. Also would be nice to hide some scripts from my list that im not currently interested in.
Any guidance on where to start would be appreciated ? e.g. is this something possible with an addon or is it core chrome functionality ie is this a patch to the chrome source ?

There is a small guide about extending Chrome DevTools.
http://smus.com/extending-chrome-developer-tools
The guide about hacking the DevTools is here http://code.google.com/chrome/devtools/docs/contributing.html

Chrome doesn't currently allow messing with the developer tools. There is an experimental chrome.experimental.devtools API however that allows you to add your own pages to the devtools. Experimental APIs needs to be enabled on chrome://flags, otherwise extensions using them won't install. And of course you cannot upload such extensions to the Chrome Web Store. If that's ok for you then you can try to implement something. Eventually these APIs will be marked as stable but I have no idea when this will be.