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.
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
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.
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.
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.
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.