Webdlg debugging on Mac using WebKit inspector

[slbaumgartner]

I don't know if this is common knowledge, but I didn't find a reference to it when searching sketchUcation, so I thought I'd share.

If you turn on the WebKitDeveloperExtras for SketchUp on a Mac, you can get the "Inspect element" pane/window to analyze and debug webdlg pages! Here's how:

Quit SketchUp

First, find out the bundle id for your installation of SketchUp:

• open a terminal window
• type mdls /Applications/Google\ SketchUp\ 8/SketchUp.app | grep BundleIdentifier
  You should get a line like:
  kMDItemCFBundleIdentifier = "com.google.sketchupfree8"
  (obviously, this is from a free version install - the bundle id string will be different on pro)

Next, enable the WebKitDeveloperExtras in SketchUp:

• type defaults write com.google.sketchupfree8 "WebKitDeveloperExtras" -bool TRUE
  (use the bundle id string you got above)

Now start SketchUp and open a tool that uses webdlg. If you right-click in the webdlg window, you will get a menu that says "Reload" and "Inspect Element". If you click the second choice, you will open the inspection pane/window (there is a setting on the inspector that chooses whether it opens as a pane in the target window or as a separate window). Now you can use the inspector to do things such as see which elements of the html and css affect what aspects of the display. You can also place breakpoints in javascript and single-step through the scripts to your heart's content. This technique eliminates the need to load your javascript up with alerts or similar debugging outputs, and can detect subtle errors that otherwise cause functions to abort silently.

Enjoy,
Steve

[thomthom]

I will have to try this! Struggling with some JS debugging under OSX.

(Wonder if John (driven) told me this - but I never got around to try it.)

[driven]

@unknownuser said:

(Wonder if John (driven) told me this - but I never got around to try it.)

Yes, Steve, you should have found it, maybe I used a different sting? ,but There is a ruby console version somewhere here.
I'm in 'The Isle of Man' for next 3 days so can't check...
Some jquery type dialogs need a gap created to get the options menu
Adding a margin often works, or try a textarea

Steve search my post to see some other mac tricks good and bad....
John

[slbaumgartner]

@driven said:

@unknownuser said:

(Wonder if John (driven) told me this - but I never got around to try it.)

Yes, Steve, you should have found it, maybe I used a different sting? ,but There is a ruby console version somewhere here.
I'm in 'The Isle of Man' for next 3 days so can't check...
Some jquery type dialogs need a gap created to get the options menu
Adding a margin often works, or try a textarea

Steve search my post to see some other mac tricks good and bad....
John

It was hiding away, but eventually I did find your prior post. Seems I am destined to follow ignorantly in your footsteps a year behind!

When analyzing the TestUp webdlg, I noticed a sort of catch-22: you can't open the WebKit inspector before loading the page, but that means you can't plant breakpoints in js that is executed as the page loads! The solution is to load the page, open the inspector, plant the breakpoints, and then use the right-click menu to reload the page. The breakpoints "stick" across the reload.

regards,
Steve

[archidave]

Does anyone know how to enable something like this on a Windows machine? The WebKit inspector on Mac is brilliant for debugging webdialogs, but I need to debug a problem that seems to be occurring on Windows only.
Is there a way to enable Firebug within the SketchUp webdialogs or some kind of native DOM inspector for IE?

thanks
Dave

[Dan Rathbun]

I have enabled the development edition of FireBug, in the past, ... but it's been so long I don't remember how.

[Aerilius]

Found in the lost manual: https://github.com/thomthom/sketchup-webdialogs-the-lost-manual/wiki/Debugging

[tt_su]

Install Visual Studio Express (free). Then you can either attach it to SketchUp's process, or inject debugger; statement in your JS code to make the system prompt you to debug. You can then set breakpoints in Visual Studio and inspect variables and call stacks.

I sometimes use a catch-all code like this to trigger the debugger on errors without having to inject debugger; around in the code:

window.onerror = function(message, location, linenumber, error)
{
  // Trigger an request to attach debugger.
  debugger;
  return false;
};