With the new Office Developer Tools for Visual Studio 2013 – March 2014 Update comes a feature called “Just My Code” for JavaScript, which can speed up your debugging experience by allowing you to focus on debugging your own code, and not library or framework code. In this post, I’ll walk through how this works.
What is Just My Code for JavaScript?
Just My Code for JavaScript will give you a similar debugging experience that you may be used to with managed code (VB/C#). While debugging, if Just My Code is enabled, you will avoid stepping into library and framework code. Just My Code categorizes code into three categories:
- User Code: Code that is written and controlled by you.
- Library Code: Code that is part of libraries such as WinJS, DataJS, jQuery, etc.
- Unrelated: Code that is running in your application, but is neither library code nor code that you own, and is not necessary in order for your application to function properly. For example, JavaScript code from the SharePoint server would be labeled unrelated.
By default, the following is considered “Library” code in LightSwitch and Cloud Business App projects:
- Any file that is a framework reference. This includes MSLS, jQuery, jQueryMobile, WinJS, and DataJS code.
- Any file that has been minified, such that the file name ends in .min.js.
- Any file that is located in output directory’s Scripts\Generated folder. This is code generated for you by the project.
- Any file that matches the RegEx patterns located in %ProgramFiles%\Microsoft Visual Studio 12.0\Common7\IDE\Extensions\Microsoft\Web Tools\Page Inspector\JScriptLibraries.txt.
By enabling Just My Code, it will provide an easier debugging experience by allowing you to focus only on the code that you wrote and reduce the “noise” that may be generated by library and framework code.
How do I Enable Just My Code?
To enable Just My Code, find the Options menu item under the Tools menu. Then under the Debugging category, locate the Just My Code check box and select it.
Note that because of the integration with Internet Explorer, in order for Just My Code for Javascript to work, it requires that Internet Explorer 11 is installed.
Let’s Try It Out!
For this example, we’ll use Matt Sampson’s HTML Upload Control for LightSwitch SharePoint Apps example. Following his instructions for the project, we’ll take a look at debugging the upload feature.
In the completed example, open the AddEditBooks.lsml.js file which has the two upload methods. The file should look similar to this:
We would like to see what the myUpload variable contains without stepping into code that we don’t own. To do this, set a breakpoint on the following line:
Now we will debug it by hitting F5 and adding a new book. Our first breakpoint will be hit like so:
With Just My Code enabled, choose to Step Into (F11) the SingleUpload method. At this point you’ll step into code provided by Matt Sampson because Visual Studio assumes that this is also code we wrote (i.e. it’s not a library provided by the client framework). However, we can customize the Just My Code feature so that it will also step over this code when debugging. Let’s see how we can do that.
How do I customize Just My Code?
To customize Just My Code functionality, you can add a file called mycode.json to the root of the HTMLClient project within your solution. This file will change the default behavior. To do this, on the AllMyBooks.HTMLClient, right click and choose Add -> New Item. Select JavaScript File and set the name to mycode.json.
The file needs to have the following format:
{
"Eval" : "MyCode",
"Function" : "Library",
"ScriptBlock" : "Unrelated",
"MyCode" : [
],
"Libraries" : [
],
"Unrelated" : [
]
}This file does not override default behavior of Just My Code. Rather, it enhances it. This file will be used to first to resolve all JavaScript files and the default behavior will be the fall back in case this file does not have the JavaScript file explicitly listed.
We will want to have the below block in the file.
{
"Eval" : "MyCode",
"Function" : "Library",
"ScriptBlock" : "Unrelated",
"MyCode" : [
],
"Libraries" : [
'*sharepoint.js',
'*SingleUpload.js'
],
"Unrelated" : [
]
}Notice that wildcard characters are necessary at this time. Now both sharepoint.js and SingleUpload.js will be considered library code. If you restart the debugging and step into the above breakpoint, you’ll notice that it will step over the code, allowing you to inspect the myUpload object and see the values within it.
Debugging Behavior Details
Debugging Commands
During debugging the following behavior changes occur with Just My Code enabled:
- While in user code, a “Step Into” command will be treated as a “Step Over” command if an attempt is made to step into non-user code.
- Breakpoints set in non-user code will still be hit. When this breakpoint is hit, stepping at this point will behave the same as if Just My Code was not enabled until you step back into user code. At that point, it will behave like Just My Code is enabled.
- A “Step Out” will stop on the next line of user code. If no user code is encountered, then this is the same as a “Continue” command.
Call Stack Window
Another change is what is seen in the call stack window. When Just My Code is enabled, the call stack window will show any non-user code as External Code. In our previous example, when the breakpoint is hit, this is what the Call Stack window looks like.
To view the full call stack with Just My Code enabled, you can access the Show External Code option within the context menu of the Call Stack window.
After this has been enabled, you will see the full call stack including external code.
Summary
Using Just My Code for JavaScript within your LightSwitch or Cloud Business App project will give you an enhanced debugging experience by allowing you to focus on debugging your code and avoid the noise of framework and library code. If you have any questions or comments, please let us know through comments below or by posting in our forum.
- Pierson Lee, Software Development Engineer, Cloud Platform Tools