jsConsoleFiddle

jsConsoleFiddle is a an extension for Fiddler that allows to inject jsConsole script directives into webpages automatically.

What is jsConsole?

jsConsole is an open source node.js/browser client script based tool that allows to peek into the dom and execute javascript commands via the browser. The coolest feature here is to connect to remote browsers. This allows for instance to debug web applications on devices that do not have good developer tooling support (e.g. mobile browsers). Thanks to Remy Sharp for developing this - great idea and implementation!

I had some trouble getting jsConsole to run on windows, but in the end i found out, that I just should have downloaded the node.js installer instead of the standalone exe. To run a jsConsole server locally (you may also use the public one), grab the sources from GitHub (click on the ZIP button) and decompress somewhere. Then open a command prompt in the directory and follow the steps described on the github page.

What does jsConsoleFiddle do?

To debug with jsConsole you have to include a script block in the page you want to debug, which looks similar to this one:

<script src="http://jsconsole.com/remote.js?12345"></script>

When hosting jsConsole yourself you will point to another host/port. The parameter behind the question mark is the session id that allows multiple browser instances to communicate with the same server. The script will show a message box when being loaded the first time warning, that this should only be there for debugging purposes - so you would have to manually enable/disable the script before/after debugging.

The fiddler plugin will automate this for you. It watches html page responses and injects the script tag into them.

Installing/using the plugin

To install, simply unzip the assembly attached to this post into your Fiddler/Inspectors and Fiddler/Scripts folder. The plugin requires a minimum fiddler version of v4.4.4.8. After installing successfully, you will see two additional things in a fiddler, an option menu and the inspector:

Options menu entry

jsFiddle inspector

The options dialog offers the following settings:

  • Inject jsConsole enables/disables injecting the jsConsole script into pages.
  • jsConsole Url specifies, where the console server is hosted. When blank, http://localhost:8080 is assumed,
  • Browser allows to specify the browser to launch. When blank the default browser will be used. Note that chrome does extremely well since it offers some kind of intellisense.
  • Intercepted hosts lists host names that host pages to be intercepted. Each host is placed in an individual line. Host names may contain * as the wildcard or may be commented out using a # symbol at the line start.

When intercepting responses, the plugin will mark them in the session window.

Injected response

Only responses matching a host in the given list with the mime type text/html will be intercepted. Make sure that you have streaming disabled in fiddler since it prevents interception from happening.

When inspecting the headers of an injected response, you will notice an additional header:

Injected header

This header marks the response for the inspector and in addition specifies the injected session token (in this case jsonsole-0). The number in the session token is increased in future injections making them all unique.

The script will be injected just before the closing </body> tag. And it is assumed that the page is UTF-8 encoded. I am aware that this may not be the final solution since other encodings are just fine and HTML 5 does not enforce the use of a body tag.

Here is the injected script tag in the tampered response:

 

Injected script tag

Note, that the session token corresponds to the header.

When opening the inspector, you have a link that allows to open a browser for the given session:

Clicking the link will directly open the session in the browser.

Final words

I did not put too much testing into the plugin yet, hope it works for you. Feel free to contact me with questions and suggestions.

The plugin is totally free and without any warranties.

jsConsoleFiddle-0.1.zip (8,28 kb)

About the author

for comments and suggestions contact:

 

Month List