today I am asked to write some Javascript for a Website which runs within a Windows App. The app uses a browser internally (I guess some version of IE) to render its content on screen, what is represented by a static/local website.
The main Problem is, that there isn't any way to debug that, what is normally possible with the default developer tools of each browser.
So my question(s): Is there any way to start the developer tools by JS, in case the browser internally used is IE? Are the any other ways to pull some debug data out of the app, such that I could view that output anywhere else?
So in case somebody else has already dealt with a problem alike, I would really be interested to get some ideas, how to solve that properly.
Related
Question:
What is the best way to communicate between separate Google Chrome rendering processes (tabs) without the use of a web-server?
Background:
I am writing a large application and recently I decided to try and migrate the whole thing to the browser. Due to where I work this is Google Chrome. Previous the application consisted of a c++ based (Qt) webserver / calculation engine and the browser was only used for the GUI. Now I have moved the calculation engine to javascript and I run it in the browser.
The problem is that the GUI is slightly unstable. It will often stay running for about 12 hours but then crash with an "Aw Snap" error. Before I wasn't worried because it was a simple matter of refreshing the page. Now when the GUI crashes because it is running in the same process as the calculation engine, that crashes also.
Details:
The calculation engine is now a web-page that spawns a number of web-workers. It also opens the GUI (a separate webpage) as a popup window and communicates to it using PostMessage.
The GUI typically needs to read ~ 500 floating point numbers / second (sent as JSON) from the calculation engine and write back ~ 5 numbers / second.
Yesterday I got excited because I discovered the SharedWorker API which I thought would accomplish was I wanted. Today however, I learned that recently modifications were made to Chrome so the SharedWorker actually runs in the same process as the attached tabs and it actually forces all the tabs attached to it into one process. Apparently it didn't used to do this. Does anyone know if there are any browser flags that I can set to revert to the old behavior?
I also have read a little bit about ServiceWorkers and other new APIs such as WebRTC. I have also played around with the storage APIs and thought that maybe they could be used to get two separate processes (tabs) to communicate at the rates that I need.
I want a solution that will work locally (using switches like --allow-file-access-from-files) and that doesn't require plugin installation (since even local plugins are blocked where I work).
NOTE: I saw some other similar questions but they didn't specifically address the need for there to be separate processes (only separate tabs)
Well, it looks like I figured out the answer already. The problem turned out to be how I was trying to open the GUI window.
I had a link on the calculation engine that the user clicked on to open the window:
Open GUI
However, it turns out that adding rel="noreferrer" will cause chrome to open the window in a new process.
Open GUI in new process
After I figured this out, the SharedWorker began to function as I had expected and I was able to keep by engine tab running even when the GUI tab crashed.
Is there a way to remotely debug a website?
I've just finished putting together a website that has some jquery animations. The site works fine on every machine/configuration I've tested it on.
One of the people the site needs to work for, however, reports that the animations don't work; which effectively breaks the website.
I strongly suspect his companies' network is the root of the problem; however diagnosing this is challenging as he is not a technical user and guiding him through the webkit inspector/console, etc. is not really an option.
Ideally I'd like to be able to 'capture' the network/javascript logs from IE or Chrome so that I can inspect them and attempt to work out what's gone wrong.
Aside:
I'm using an off-the-shelf Wordpress theme (http://theme.co/x/) for the site; so I expect the code is good.
While it doesn't seem possible to remotely capture and inspect the network or javascript logs from another machine's browser; there are a number of services that allow you to add automatic error reporting to your javascript code, which you can then inspect to find the root of the problem.
Examples of these are Errorception and Raygun.
As far as I have found, there aren't any similar tools to do so for monitoring network performance / loading specifically- although a similar approach with a custom script to detect if specific items have been loaded could be written.
I'm just starting doing js development, my experience with server-side, XAML, etc. I'm used to intellisence and nice debug experience.
Now I'm struggling. What is the best combo for debugging asp.net with javascript in VS2012? I'm using jQuery. I'd like to have debug breakpoints saved and just edit/start/debug/stop/edit/start... as usual.
Right now when I had VS debugger it would cache js file and it really doesn't work. I have to clear browser cache on every restart. It is real PITA to work like this. F12 tools is not that great either. I have to find js I need and set breakpoints every time I restart application.
People with experience, any help on minimizing pain?
You can use VS2012 to debug the JS by adding the breakpoints as usual then attaching to the IE process after allowing access to debug JS in IE through the settings. That will let you step through the JS as you would code when debugging as normal
Guide (old but still works the same):
http://www.codeproject.com/Articles/18921/Using-Visual-Studio-to-Debug-JavaScript-in-IE
I'm not a Windows Phone developer, and I want as little to do as possible with anything related to Microsoft. Nonetheless, I need to get my mobile web app running properly on Windows Phone 7. What debugging tools are available for the platform? Something like the Webkit developer tools or Firebug would be ideal, either from the phone itself or more likely, remotely debugging from my computer.
If such a thing doesn't exist, I'd settle for being able to read Javascript error messages, and view the contents of variables using alert() or similar. At this point, all I know is that my JS is failing: I don't know where or why, let alone how to fix it.
My dev computer is running OS X, and I'd really like to be able to use these tools from OS X if possible. Assuming that debugging tools exist (which I really hope they do) are they designed for Windows only? If so, does anyone know how well they would work with Wine or similar?
EDIT: I have a physical Windows Phone 7 device, so I can use that. However, alert() doesn't seem to be working, which is why I'm posting this question. Does alert() normally work on the WP7 browser?
You'll likely find the Mobile Perf Bookmarklet to be the easiest all-in-one tool for testing any mobile device.
Works well on the iPhone/iPad/Samsung Galaxy Tab in my testing so far.
Quote:
It displays a menu with links that load other bookmarklets including Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess, and Zoompf.
Unless you have a Windows Phone 7 device, you will need to run Windows in BootCamp and install the Windows Phone Developer Tools in order to test in IE on the emulator. I don't know about Whine, but I ran into major problems trying to test in Parallels - so based on my experience, I suggest keeping it as simple as possible.
There is no console in IE on the phone, so you will need to use alert, like you suggested, or just write text to a div on your page as a custom console.
If you really want to code in OS X (which I definitely understand), using a separate machine for testing IE in the WP7 emulator is going to be your best bet.
EDIT: I just tested alert and it did work fine on my Windows Phone. My guess is that a syntax error is preventing it from calling.
The following may be interesting
Simple IE debug tool for Windows Phone
Supports
Html traversing
Html node styles, properties, metrics
Reading console output
Executing js on device side from console (including intellisense)
Dynamic script injection - ability to debug live sites
Not supported
js breakpoints
Just wanted to add a note to say that full JavaScript debugging is possible now with Windows Phone 8.1 and Visual Studio 2013 Update 2. Full details are available at:
http://blogs.msdn.com/b/visualstudioalm/archive/2014/04/04/diagnosing-mobile-website-issues-on-windows-phone-8-1-with-visual-studio.aspx
I realize that this doesn't help the versions referenced in the original question (WP7), but I'm hoping this will help people who may find this question and are running a more recent version.
Something that has worked for me, is to test my mobile pages through the Windows Vista built-in Internet Explorer browser.
It comes with a script debugger ( which you have to enable in Advanced Options tab through the Internet Options menu ), and it seems that it gets really close to the Internet Explorer Mobile implementation.
Another tip would be, that, instead of using window.alerts, you can also use document.write or set output to a div content.
I'm using this hack to have console.log send info back to the server (it uses window.fetch, which I'm polyfilling, but could use xhr instead) https://gist.github.com/wheresrhys/bf93057ee3a594454582
I'm pretty new to workign with Javascript.
In most languages you can run the code quickly locally on your machine. From what I've seen, in JS you generally only use it via the browser, and so I've been uploading my code an viewing its effects in the browser. This has proven very tiresome. Also, if I mak one error, it seems like my JS/JQuery will just do NOTHING, instead of giving me a useful error, message, which is making it painfully slow to code in.
IS there some way to run JS locally to see that it is working as I go? And then only upload it to the web when I'm mostly done? What ways are there for me to do this? What ways aer there for me to unit test the Javascript locally? Say I have some JAML that should render as <p>HI</p>, how do I run this locally in a unit test?
Thanks for the help,
Alex
EDIT:
Thanks for all the great suggestions. I'll have to take a bit of time and go through them to see which ones best help me in my situation.
Since you're using jQuery, I assume that you actually want to manipulate the various elements on your page. So depending on your specific development enviroment, uploading it each time is probably the way to go anyway. If you can set up a dev enviroment on your local machine (not always possible) then go with that.
As an actual answer to your question, I suggest using Chrome's developer tools, it doesn't just have the console, but an element inspector, and a resource tracker (resource tracker is invaluable when working with JSON and AJAX, since invalid json will fail silently)
As far as I know, the firebug plugin for firefox (dont use it myself) has a similar feature set, so if you're more comfortable with that go with it.
Just remember, as a developer, your development (and debuggin) enviroment is just as important as the code that you are writing.
EDIT: Noticed that you mentioned unit testing. There are several unit testing frameworks out there for JS including one that integrates with firebug called FireUnit. Do a quick google search to find more if you want.
You don't need to upload the JS file to a server to test it. Just write an html and declare the js binding
<script
src="js/yourJSFile.js"
type="text/javascript"></script>
Edit the JS file in your favorite editor and then refresh the page to test it.
For unit testing the best option is Selenium. It allows you to record an interaction with the browser and then play it back.
You can use Firebug with Firefox to debug JS, and Google Chrome has a debugger built-in (use the Tools -> Developer Tools menu).
You can run Javascript from the local file on your machine in your browser, so you can skip the uploading step.
Also, I'd recommend using Firefox/Firebug combo for developing Javascript as it will be very handy, especially for the part you mentioned about not seeing what's going wrong with your code.
Even if you upload your javascript it gets downloaded back to you as soon as you visit the webpage that invoques it. Its run client side always. So stick to local and use firebug as the others have said. Google`s developer tool is quite nice too.
In the browser if you open the developer tools, follow the following steps:
1) Navigate to sources
2) Under sources, click snippet and open run.js
3) You can use run.js to write as much code as you want and run it locally only to see if your code is working or not (it will give you output on the console)
4) Also you can get used to some keyboard shortcuts to make it faster for you.
5) For small javascript codes, you can navigate to console and run your code there
If you want to do unit testing with Javascript there are extension of Firebug that can help you with that. I haven't try any of them, so I can't really tell you which one are worth considering, but you can easily find them if you search for the keyword "Firebug unit testing" on Google.
What seems to be comming on top is FireUnit. You can find some information about how it works here.
Consider Spider Monkey, which is a javascript engine separate from a browser. If what you are developing does not involve rendering to a webpage or can be separated from the rendering code (good practice!), then this could be useful.
I prefer Chrome to Firefox and I just found Web Server for Chrome.
It's just a Google App that quickly sets up a web server for you and will be set up anywhere you are logged into Chrome. It only allows file access to your current devices, or if you specify, other devices only on the current LAN.
You just point it to the directory with your index.html file and type http://127.0.0.1:8887 in your browser.
Additionally to the answers given you can use Jasmine for automated testing.
A tutorial that seems to help get started with automated testing on Jasmine is provided by Evan Hahn.
I used it and for me it works like a charm. Especially if test driven development is what you are going for!