Is there a headless browser for FireFox (similar to PhantomJS for Chrome), that can be used with Karma?
Using the Grunt FireFox Launcher plugin causes, the browser to be launched every single time we build our JavaScript using GRUNT. We would like something which is more silent and redirects its output to the console window. Very similar to how PhantomJS works for Chrome. Any ideas?
First and foremost: Phantomjs does not launch Chrome. Phantomjs is a javascript implementation of Webkit.
Now, if you want to run firefox headlessly you can run it inside XVFB. Without knowing anything about your build since you haven't included that, I'll just link to node xvfb which is probably a good place to get started: https://github.com/proxv/node-xvfb
PhantomJS runs webkit not Chrome. It is the same engine but Chrome adds quite a bit more (ie Intl support). There is no equivalent for Gecko -- the equivalent of webkit for Firefox. On Linux or OS X, you can use xvfb with Firefox to stop the window from popping up.
Related
Firefox has the JSShell for SpiderMonkey. Do the other major browsers Chrome and Safari have a command-line interface to their javascript engines? If so, this would be a great lightweight way to test javascript to ensure that it runs cross-browser without having to open a full browser.
Is there a method for interactive debugging JavaScript and TypeScript in Visual Studio using Chrome similar to the functionality currently provided with Internet Explorer? With IE I can set a breakpoint in JavaScript or TypeScript in the IDE and step through the code within the IDE. I cannot get that same behavior with Chrome in Visual Studio.
For a fully integrated debugging experience with any JavaScript/browser based application and Visual Studio, you'll need to use Internet Explorer today. As TypeScript compiles to JavaScript, the integrated debugging also requires Internet Explorer.
The "trick" I often use if I want to use another browser is to add a debugger; statement somewhere in my TypeScript/JavaScript code and have the development tools open in Chrome ..., and execution will then stop on that instruction. As long as you have source-maps enabled, you should see your original TypeScript code in the Chrome debugging window. You can then use Chrome debugging tools to set further breakpoints. If the file doesn't change, the breakpoints will be retained from a "refresh" of the page.
This does not allow me to set breakpoints within Visual Studio though, but it's still effective and works well enough for my development.
Update April 2016
As a few in comments have pointed out, there's a path to making this work a little better, although the experience isn't nearly as complete as it is for Internet Explorer. Follow the steps outlined here. It involves starting Chrome with a custom command line (to enable remote debugging):
chrome.exe --remote-debugging-port=9222
And then attaching to the Chrome process with WebKit debugging enabled. You can add a custom browser to make it easy to launch Chrome.
(But, I will add that I haven't been able to get this to work in a way that I find useful and consistent, especially as I use Chrome for most other web browsing.)
Live page: tt.fbcwinterretreat.org
The page and its script work well with chrome, IE and firefox. But on iPhone/iPads, not only the layout messed up, but also the image carousel doesn't work. I don't have a mac so I havn't tested it on Mac, but I'm quite sure it won't work on Mac either. To find the problem, I need something like chrome's dev tools to debug it, the question is, how do I do it with a window PC?
I have tried safari for windows, it turns out Safari has stopped support for window since 2012. And the latest version(5.1.7) is totally unreliable. So how do you guys make sure your sites/codes work on Safari if you have only window PC? I believe this must be a very general question.
The best solution is to buy a (second-hand) Mac. Apple does not allow installation of OS X on any machine than a Mac so running a virtual machine is not an option. Alternatively you could use one of the online browser compatibility tools such as
http://crossbrowsertesting.com/ although they are relatively pricey, but in return they provide a comprehensive list of browsers and browser versions.
I am using camera with getUserMedia and I get a few errors I want to fix. The thing is Visual Studio only allows me to debug JavaScript (I mean hitting breakpoints) with IE, and IE does not support getUserMedia.
If you want to debug in a browser other than Internet Explorer then you will need to use the Developer Tools of that individual browser and set your breakpoints accordingly. Alternatively you could use console.log() and/or console.warn() to get the state of your objects in code. Visual Studio does not and cannot understand the implementations of different JavaScript and rendering engines (V8, Blink, Gecko etc.) - nor should it ever attempt to do so. These engines move so rapidly with six week release cycles the IDE would be a totally misleading proxy for the actual the platform you're supposed to be testing against.
Both Firefox and Chrome allow you to retain console contents beyond a page reload/navigation and there are tools like Browser Link in Visual Studio will allow you to test in multiple browsers simultaneously - inspecting the console results afterwards for errors (interactions will have to be tested individually in each browser).
If you are testing mobile devices Adobe Shadow that would potentially allow you to test on multiple tablets and/or phone simultaneously whilst using Dev Tools (I believe Chrome) on your laptop or desktop. Otherwise desktop browsers dev tools allow you to debug page running on a connected mobile device using the same browser, or - in the case of Firefox - also Chrome instances on the device.
It is well worth getting to know browser dev tools for front end debugging and troubleshooting, as these are much more powerful for this purpose than those provided with Visual Studio. The free CodeSchool course Discover DevTools (focussed on the Chrome DevTools and sponsored by Google/Chrome) may help you discover some of the features of client developer tooling, and many of the interfaces and techniques will be broadly applicable to other browser dev tools.
If you want to test on devices that are not available to you, browsers that you cannot install on your system (e.g. Safari on Windows) or simply a newer or legacy version which you cannot install alongside the one already installed locally then there are services like Browserstack which allow you to do so in hosted virtual machines. There is a Visual Studio extension available for BrowserStack to help connect to projects running locally.
I was wondering if you could suggest a javascript debugger which works on Android webkit.
I was trying to inject the following code into Android Webkit but for some strange reason could not do it in the begining (i think it might have to do something with specificity but not sure)
document.body.style.color='#ff00ff';
you might want to take a look at weinre:
Try jsHybugger: http://www.jshybugger.org/
It lets you set breakpoints, singlestep, catch exceptions, and interact with the JS/DOM environment. You can use it from Eclipse or from a Chrome or Chrome-compatible debugger on the remote desktop. It can be used with apps that create their own webView.
However, you have to install a few files -- but probably no more complicated to use than weinre. it does extensively modify the JS files (on the fly, transparently to the user) to enable all this debugging -- webKit really should support javascript debugging natively.
Your question shows an issue with altering CSS, which weinre does well. I didn't see that weinre supported debugging javascript (ie breakpoints and singlestepping)