{"id":9735,"date":"2013-09-19T10:06:00","date_gmt":"2013-09-19T10:06:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudioalm\/2013\/09\/19\/just-my-code-for-javascript-windows-store-apps-in-visual-studio-2013\/"},"modified":"2022-08-02T00:00:42","modified_gmt":"2022-08-02T08:00:42","slug":"just-my-code-for-javascript-windows-store-apps-in-visual-studio-2013-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/devops\/just-my-code-for-javascript-windows-store-apps-in-visual-studio-2013-2\/","title":{"rendered":"Just My Code for JavaScript Windows Store Apps in Visual Studio 2013"},"content":{"rendered":"

If you\u2019ve ever debugged a JavaScript Windows Store app there\u2019s a very good chance that you accidentally ended up in either \u201cFunction code [dynamic]\u201d or \u201cbase.js\u201d without knowing how you got there and with no clear way to get back out. To help address this, we\u2019ve introduced a feature called \u201cJust My Code\u201d (JMC) for JavaScript in Windows Store apps which is now available in Visual Studio 2013.<\/p>\n

Those who have debugged C# or Visual Basic code in Visual Studio have likely already benefitted from this debugger feature that helps you focus on your code and abstracts the implementation details of the underlying framework. To better understand how JMC works we\u2019ll walk through a very simple example, then discuss some of the finer points of how it behaves, and finally I\u2019ll show you how you can customize the behavior.<\/p>\n

Why Just My Code<\/h2>\n

To start, I\u2019ll demonstrate the behavior when Just My Code is disabled. To this I\u2019ll create a new JavaScript Windows Store Blank app called App1. Then inside the activated event handler I\u2019ll add the following code snippet to try to open a file from the pictures folder (also adding the \u201cPictures Folder\u201d capability to the app\u2019s manifest)<\/p>\n

\/\/ TODO: This application has been newly launched. Initialize\n\/\/ your application here.                \nWindows.Storage.KnownFolders.picturesLibrary.getFileAsync(\"doesNotExist.png\").then(\n    function (file) {  \/\/handle the success case\n        return file.name + \" was opened successfully\";;\n    },\n    function (e) {  \/\/handle the error case\n        return e.message;\n    }).done(function (message) {   \/\/ run after either success or error\n        var result = message;\n    });\n<\/pre>\n
Next I put breakpoints inside the success and error functions, and when I start debugging I\u2019ll hit the breakpoint in the error function.<\/p>\n
\"image\"<\/p>\n
Now what I want do to is step to the \u201cvar result = message;\u201d line in the .done() function. So I press F10 (Step Over) twice and all of the sudden I\u2019m in code I don\u2019t recognize in a document titled \u201cFunction code [dynamic]\u201d<\/p>\n
\"image\"<\/p>\n
In an effort to get back where I came from and just put a breakpoint on the line I intended to get to, I look at the Call Stack window. Here I see an incredibly long call stack with code that is mostly framework code.<\/p>\n
\"image\"<\/p>\n
Just My Code at Work<\/h2>\n
Now let\u2019s try the same scenario only this time with Just My Code enabled (which it is by default in VS2013). I\u2019ll start debugging again and I hit the same breakpoint in the error handling function and press F10 twice, this takes me out of the error handling function instead of into \u201cFunction code [dynamic]\u201d<\/p>\n
\"image\"<\/p>\n
A single press of F11 (Step Into) then lands me in the .done() function as I would expect<\/p>\n
\"image\"<\/p>\n
Also when I look at the Call Stack window I can see that all of the frames in \u201cFunction code\u201d and base.js have been collapsed into the \u201c[External Code]\u201d meta-frame so I only see frames for code that I control.<\/p>\n
\"image\"<\/p>\n
Just My Code Details<\/h2>\n
As we saw in the simple example above, Just My Code helps developers focus on their code while debugging. Now let\u2019s dig into some of the details of how exactly Just My Code will behave when debugging.<\/p>\n
What is My Code?<\/h2>\n
The first important thing to understand about Just My Code is what exactly is considered my code (also referred to as \u201cuser code\u201d). When JMC is enabled, code is classified into three categories:<\/p>\n
    \n
  1. **My Code: **Code that you own and control****<\/li>\n
  2. **Libraries: **Is intended for libraries that you use regularly and your application relies on to function correctly (for example WinJS or jQuery). ****<\/li>\n
  3. **Unrelated: **Is intended for code that that may be running in your application, but you don\u2019t own and your application doesn\u2019t directly rely on it to function correctly (e.g. an advertising SDK that displays ads)****<\/li>\n<\/ol>\n
    By default in Windows Store apps, the following code is considered to be \u201cLibrary\u201d code:<\/p>\n