Execute Actions: JavaScript in (browser) – getting help from the debugger

[ComplexPoint]

Execute JavaScript in (Safari or Chrome) actions enable all kinds of useful interactions with browsers, and are perhaps a bit easier to draft than they look.

The trick is ⌘⌥I, which lets you step through your running JS code line by line, watching the variable values change, and inspecting the properties of objects, in the browser's symbolic debugger.

In either browser, you can select something on the web page, and use ⌘⌥I or "Inspect Element" in the Ctrl-click contextual menu.

(In Safari, you may first need to enable the 'Developer Menu' through Preferences > Advanced).

I personally prefer to use the Chrome tools (easier XPATH searches), but both hugely reward the effort of some patient exploration and experimentation. The debugger is really the best place to watch it all happen in slow motion, and learn how it all works.

To make the execution of your JavaScript action pause at a point of interest, allowing you to start stepping through the execution line by line, insert a line which simply consists of:

debugger;

in your code.

In the next version of OS X, you will be able to do this with JavaScript for Applications automation code from Script Editor.

OS X 10.11 Release Notes

(You can already use Script Editor to draft your Browser Javacript code, converting the function which will be used in the browser to a string, and submitting it for browser execution using the techniques shown in this post:

Markdown TOC for active page in Safari (JXA ⇄ Browser JS)

A simple macro which just generates a Markdown list of the headers in the web page currently loaded in Safari. (Or, with a minor edit, in Chrome). Simple Markdown TOC for current Safari page (demo).kmmacros (21.3 KB) Really intended as an illustration of how you can pass a JS function from Javascript for Applications to Safari or Chrome Browser JS, and get a result back. There's a lot of power in the browser, particularly for parsing, so it can be a useful resource. A generic JXA function …

[JMichaelTX]

@ComplexPoint

Execute JavaScript in (Safari or Chrome) actions enable all kinds of useful interactions with browsers, and are perhaps a bit easier to draft than they look.
. . .
In the next version of OS X, you will be able to do this with JavaScript for Applications automation code from Script Editor.

Thanks for sharing, Rob. This is very helpful.

Using the Safari JS debugger with JXA will be very cool. I only wish they would push it out for Yosemite. Maybe El Capitan will be different, but so far it takes me about a year to upgrade Mac OS after it's release. Just too many bugs in both the OS and apps, and too many apps that are broken. As you know, I'm just now upgrading to Yosemite.

But this is all good stuff. I'm clipping it all to my Evernote account.