Tuesday, December 22, 2015

Debugging Timesheet WorkItem Control in TFS Web Access

Debugging Timesheet WorkItem Control in TFS Web Access

After installing the plugin on your tfs, you can debug it if there is any problem or bug. The coding and installation part is in my previous post.

Web Access

You can use any browser's debug tool, here use Chrome as example.

Remember there are three files in the zip, one is .min.js which is used by the browser. For debug purpose, instead of create a min file, we copy, paste TimeSheetControl.WorkItemTimeSheetControl.debug.js and rename it as TimeSheetControl.WorkItemTimeSheetControl.min.js, which means .min.js and .js has the same content and it is easy for debugging.

Open Chrome, go to a task of your project. Press F12 or go to developer tools.
Go to Sources tab, open the js file as shown in the picture below.
Set the break point anywhere you want to debug. Note that workItem can only be accessed when any action was taken, like add and delete. You can check the values of workItem by setting a break point in add or delete functions.

Visual Studio

To debug the timesheet plugin in visual studio 2015, go to the Solution Explore of your timesheet source code.

Right click on your solution, choose properties.

In Property Pages, go to Configuration Properties, Configuration choose Active(Debug).

Remove all the break point in your code, right click on the solution and choose clean solution, and rebuild solution.

Now navigate to your project's bin folder, copy all the files specially including the .pdb files which are the debug files, to C:\ProgramData\Microsoft\Team Foundation\Work Item Tracking\Custom Controls\14.0. The above location is where your timesheet plugin installed for Visual Studio 2015.

Set break points in your source code, and open another instance of visual studio, go to Team Explore, open any task's timesheet tab. You will be able to debug your timesheet code.

No comments:

Post a Comment