Using Chrome DevTools to debug Bot Framework

When debugging the Bot Framework it is trivial to debug if you are developing in C#. It was bit of pain for me to do the same is node, as JavaScript is not my everyday language. But, after researching googling about this, I can say that it is really easy in node as well.

Below are the version details that I tried this on:

  • node: 8.1.2
  • npm: 5.0.3
  • OS: Windows 10
  • Chrome: Canary 61.0.3137.0
  • Bot Framework Emulator: 3.5.29

Below is my package.json for a simple “Hello World” bot.

{
  "name": "echo-bot",
  "version": "0.1.0",
  "license": "MIT",
  "description": "Echo bot example",
  "scripts": {
    "start": "node --inspect app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "botbuilder": "^3.8.4",
    "dotenv": "^4.0.0",
    "restify": "^4.3.0"
  }
}

Since I am developing this in Visual Studio Code, this is my tasks.json

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "start"
            ],
            "name": "Launch Program"
        }
    ]
}

Now, to run the bot application in VSCode using Ctrl+F5 or typing “npm start” in the command prompt.

To debug the bot in Chrome DevTools, type “chrome://inspect/#devices“. Then click the “Open dedicated DevTools for Node” link. The page should be like this once you do this.

Chrome DevTools to debug Bot Framework.png

Chrome will now display the node application that it can detect in the Remote Target area. Click in the inspect link to open the DevTools. Now, set your breakpoint and use the emulator to send a message.

Debug botframework source

In the screenshot above you can see that I am already debugging using Chrome DevTools and debugger is waiting in the breakpoint that I set.

Reference:

https://nodejs.org/en/docs/inspector/

 

 

 

 

 

 

 

Level Up: A Chrome extension for CRM Power Users

EDIT (14/11/2016): The extension is now available on Edge as well. ReferĀ https://github.com/rajyraman/Level-up-for-Dynamics-CRM-365-Edge-Browser

Today, I released a new Chrome extension that assists CRM power users. In this initial release there are 12 quick functionalities:

Form helpers

  1. Display Logical names for controls (Original script by Chris Groh http://us.hitachi-solutions.com/blog/2014/10/27/showing-entity-logical-names-on-form/)
  2. God Mode (based on http://www.magnetismsolutions.com/blog/paulnieuwelaar/2014/07/29/activate-god-mode-in-crm-2013—don-t-let-your-users-see-this)
  3. Form properties (Original script by Jared Johnson http://www.magnetismsolutions.com/blog/jaredjohnson/2014/08/03/dynamics-crm-2013-resurrecting-the-form-properties-window-with-bookmarklet)
  4. Dirty fields i.e. fields that have been modified
  5. Display record URL
  6. Display record Id

Navigation helpers

  1. Open record by Id
  2. Open security area
  3. Open System Jobs
  4. Open Solutions
  5. Open Process Definitions
  6. Open main

How do you install it

Download the extension from Chrome store -> Level up for Dynamics CRM

How does it look

Once you install this extension you will see a new rocket icon in the toolbar. If you click the icon, you will get a popup menu.

Screenshot Main

How to use it

You can have a look at this animation below to get an idea about the functionalities.

Functionality Quick Intro

Source code

The source code for the extension can be downloaded from https://github.com/rajyraman/Levelup-for-Dynamics-CRM/

The minimum supported version of Dynamics CRM for this extension is CRM2015.

In the initial version, I have 12 quick actions. Please feel free to fork the repo and add new functionalities that you are currently using with a bookmarklet and finding it useful.

Please also log any issues/feedback in the github repo. I hope this will be a useful extension for improving your productivity.

EDIT (24/06/2016): Fixed credit links for God Mode, Form Properties and Control Logical Names bookmarklets in post and repo.

Chrome Extension: Site Highlighter

EDIT (30/12/16): I have unpublished the extension from Chrome store and retaining this post and the GitHub repo. Stylish is a better extension and offers more features. This extension was a good learning experience for me on how to develop Chrome extension.

Site Highlighter is a Chrome extension I developed to do only one task: change the background colour of an element or a tag. The element could be selected by classname or id. I will give you an example. CRM 2013 doesn’t support themes. But if you just want to differentiate the various environments (DEV/TEST/PROD) by the navigation bar colour, it is not possible without changing the css using the the CRM web application. This is easy to do in OnPremise, but is technically an unsupported change.

In this instance you can use my extension to change the navigation bar to a different colour. The ID you can to match is navBar. The screenshot below shows you the config menu of the extension.

Site Highlighter Options

After you set this up the extension will highlight the element by id navbar, with green colour. The source code for the extension is available at https://github.com/rajyraman/Site-Highlighter. You can install the extension from https://chrome.google.com/webstore/detail/site-highlighter/hembcpepmfkaigjalcajpjjbeimbhnnk

This is my first extension and I worked on it only for three days, including constant ALT+TABing the Chrome Extension developer documentation, and so it may be a little rough around the edges.

Request to people with expertise in Chrome extension Development/UX & Users: If you can give your thoughts on things that I am not doing correctly, it will be helpful for me to make improvements. Thank you.