Debugging HTML / Javascript in MSVC environment

[sophiadoan]

I am trying to test the Palette Sample in the SDK and was able to debug the C++ code under MSVC but was unable to debug the .html file which loaded successfully to the palette.

The HTMLEventHandler was able to parse the JSON object sent from the palette. Inside this handler, as shown below, I send some json data back to the palette and then Fusion hung at sendInfoToHTML. Setting breakpoint in c++ file works, but not in the .html file. So, I can't debug the Javascript code in the html file. How do you setup MVSC 2019 to debug JavaScript?

#include <string>
#include <Core/CoreAll.h>
#include <Fusion/FusionAll.h>
#include <CAM/CAMAll.h>
#include <locale>
#include <codecvt>
#include "C:\SimpleJSON\src\JSON.h"

using namespace adsk::core;
using namespace adsk::fusion;
using namespace adsk::cam;

class imagePanelHTMLEventHandler : public HTMLEventHandler
{
public:
	void notify(const Ptr<HTMLEventArgs>& eventArgs) override
	{
		if (!eventArgs)
			return;
		JSONObject root;
		std::string edata = eventArgs->data();
		// parse and serialize JSON
		JSONValue* value = JSON::Parse(edata.c_str());
		if (value == NULL)
			return;
		else
		{
			// Retrieve the main object
			if (value->IsObject() == false)
			{
				return;
			}
			else
			{
				root = value->AsObject();
			}
		}
		std::wstring_convert<std::codecvt_utf8_utf16<wchar_t>> converter;
		std::string action = eventArgs->action();

		Ptr<Palette> imagePanel = ui->palettes()->itemById("ImagePanel");
		if (imagePanel && action.compare("Load All Images") == 0) {
			// Adding a string
			root[L"file"] = new JSONValue(L"C:/myImage.jpeg");
			// testing Parse 
			JSONValue* value = new JSONValue(root);
			std::string jstring = converter.to_bytes(value->Stringify());

			imagePanel->sendInfoToHTML("LoadImages", jstring);
		}
	}
};

I made some changes to the JavaScript to receive json data:

    window.fusionJavaScriptHandler = {
        handle: function (action, jsonData) {
            try {
                var filePath;
                var jObj = JSON.parse(jsonData);
                if (action == 'LoadImages') {
                    filePath = jObj.file;
                    // Update a paragraph with the data passed in.
                    //document.getElementById('p1').innerHTML = data;
                }
                else if (action == 'debugger') {
                    debugger;
                }
                else {
                    return 'Unexpected command type: ' + action;
                }
            } catch (e) {
                console.log(e);
                console.log('exception caught with command: ' + action + ', data: ' + jsonData);
            }
            return 'OK';
        }
    };

[j.han97 · Accepted solution]

The Javascript debugging is usually done in Fusion 360 (for me). Assuming that you have the palette shown successfully, right click on it and select "Show DevTools". The developer tools (similar to developer tools of net browsers) will pop out and allow Javascript debugging.

[sophiadoan]

If I create a custom event inside imagePanelHTMLEventHandler and call sendInfoToHTML when the custom event fires, fusion does not hang. So I don't know why it hangs when calling sendInfoToHTML inside imagePanelHTMLEventHandler.

I right click the panel and select "Show DevTools" the DevTools window opens, but as soon as I click on the "Click to send" button, which sends data to fusion, immediately the DevTools window disappeared as shown below.   

[sophiadoan]

I tried again, this time I moved the DevTools window aside before clicking on "Click to send" button and the DevTools window is partly visible behind fusion so thank you, your solution works.