We are thrilled to bring you our new Safari Extension for Web Developers. It offers 4 distinct features to cover your development needs. In this article, we will focus on the more advanced usage, ksdiff for the Safari JavaScript Console. (You can also use the extension for HTML and CSS diffing; our next post will cover that in detail.)
JavaScript Debugging
When it comes to debugging tricky issues, there is no single solution. It is about having many different tools, and knowing which one to use when, or how to combine them to achieve the goal. Safari already comes with many powerful debugging tools, like breakpoints and the Javascript Console.
We want to introduce you to a new tool for your toolkit that works great with the ones already provided: ksdiff for the Safari JavaScript Console. It will allow you to send text directly from the JavaScript Console to Kaleidoscope at any time.
The idea is the same as our Xcode Debugger Integration. If you haven’t tried that yet, check it out!
Enabling the Extension
Before using the Kaleidoscope Dev Tools extension, you need to enable it in the Safari Preferences. Select Safari > Preferences… from the menu and click the Extensions button in the toolbar. In the list of extensions, enable the checkbox next to Kaleidoscope Dev Tools. Confirm by clicking Turn On in the alert that follows.
Basic Use
After enabling the extension (and reloading the page you were visiting before enabling it), you can quickly test it by jumping into the Javascript Console and typing: ksdiff(‘Hello World’) This will open a new Kaleidoscope window, showing Hello World. Go back to Safari, and enter ksdiff('Hello You!'). Kaleidoscope comes to the foreground, now showing you a comparison between the last two commands. You can repeat these steps as often as you need, and then use the File Shelf in Kaleidoscope (or even keyboard shortcuts) to switch between the content you want to compare.
Combine with Breakpoints
Most of the time we use ksdiff() in combination with breakpoints. We’ve all been there: we hit a breakpoint, inspect a variable quickly by checking its value in the hover popover, and it looks like we did everything right. In reality, the missing piece to the puzzle is hiding in a dictionary with too many entries to easily parse.
To try how it works for yourself, head over to https://annual-self-classification-report.github.io and set a breakpoint at the end of the updateProduct() function.
On the webpage, click the Load Sample button, select a row in the Annual Self Classification Report.csv table, then click Update Product. Now you should stop in the breakpoint.
As in this screenshot, when hovering over data, you will see a tiny popover containing many properties of an object, the elements of the data array in this case. How many times have you focused on one property, assuming it to be the culprit? Though the value was correct over all the iterations, it turns out that the issue was hidden below the fold, outside the visible area.
With ksdiff(), you can just send these entire objects to Kaleidoscope at every iteration, giving you a more complete picture instead. And you’ll be better able to notice changes between iterations immediately.
Breakpoint Actions
If you don’t want to interrupt your test flow but still need to record data, you can use a breakpoint action like above and use the “Automatically continue after evaluating” option.
Summary
Next time you find yourself in a debugging situation where you need to inspect an object with many properties, remember Kaleidoscope and ksdiff(), which allows you to quickly save the current state. We even use this not only for comparing output, but for quickly getting content into another app, ready for copy and paste use later on.
More to come…
The next post will show you how to use the new Kaleidoscope Dev Tools for Safari when working on HTML and CSS. Until then, we’d love to hear your feedback.
