Debug KnockoutJS

Knockout is awesome, but as a Knockout beginner, it was hard for me to debug. After reading a lot about Knockout, I found a Stackoverflow thread about how to debug KO. This post about Knockout Strategies is a must read! The SO question I mentioned earlier inspired me to create my first snippet.

I prepended some HTML to display the output on the left side of the screen. Here is the code:

<div style="position: absolute; top:0px; left:0px; height: 100%; width: 400px; overflow: auto; background-color: rgba(255,255,255,0.8);color: black; background-image: url(http://knockoutjs.com/img/ko-logo.png); background-repeat:no-repeat; background-position: top center; padding-top:125px;">
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</div>

And here is the snippet code:

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <CodeSnippet Format="1.0.0">
    <Header>
      <Title>
        Knockout Debug
      </Title>
      <Author>JP Hellemons</Author>
      <Shortcut>Kodbg</Shortcut>
    </Header>
    <Snippet>
      <Code Language="html">
        <![CDATA[
        <div style="position: absolute; top:0px; left:0px; height: 100%; width: 400px; overflow: auto; background-color: rgba(255,255,255,0.8);color: black; background-image: url(http://knockoutjs.com/img/ko-logo.png); background-repeat:no-repeat; background-position: top center; padding-top:125px;">
          <pre data-bind="text: ko.toJSON($$data, null, 2)"></pre>
        </div>
        ]]>
      </Code>
    </Snippet>
  </CodeSnippet>
</CodeSnippets>

The dollar sign needs to be escaped. You can download the snippet and open the ‘Code Snippet Manager’ in Visual Studio with CTRL+K, CTRL+B and import the snippet file.

The shortcut is Kodbg (and then tab)

Good luck!