Debug JavaScript

[raptorjr]

I'm trying to learn how HG works. And to do this I need to learn JavaScript. But I wonder if it is possible to debug the JavaScript code when running HG? Where you set breakpoints and can see the content of variables?
I'm used to "normal" desktop application programming where you can do this. But I can't figure out if it is possible with a web app like HG?

I have downloaded the code and have everything running in VS2015.

[mvdarend]

If you're debugging programs within the HomeGenie interface there's no way to set a breakpoint as far as I know, I usually debug by outputting info via Program.Notify(string, string);

If I'm making something complicated I usually create a test application within Visual Studio itself (I use C# for automation programs) and test/debug there. The only problem is that you don't have access to all of the Namespaces in Mono, so something that works standalone might not run in HG.

[raptorjr]

That makes things more complicated. I see a lot of guides on Google on how to debug JavaScript, but didn't understand during what circumstances it was possible. But I guess it is not possible with HG then.

Strange, since we do have the source code. Can't even imagine how hard it would be to make such a program without the possibility to debug in a good and fast way.

[mvdarend]

Sorry, I didn't read your post properly.

For debugging 'Automation Programs' within the HomeGenie interface there is no debugger available.

But if you want to debug the actual source code of HomeGenie itself, you can do the following:

The C# parts:
 - Standard debugger in Visual Studio.

The Javascript parts:
 - Attach Visual studio to the running website. You can do this via Debug -> Attach to process. You can then debug like you would the C# code.
 - Debug within the browser, either with the standard debugging tools (F12) or with something like FireBug.

[[email protected]]

I keep meaning to test whether attach debugger commands work in automation programs..

[raptorjr]

Sorry, I didn't read your post properly.

For debugging 'Automation Programs' within the HomeGenie interface there is no debugger available.

But if you want to debug the actual source code of HomeGenie itself, you can do the following:

The C# parts:
 - Standard debugger in Visual Studio.

The Javascript parts:
 - Attach Visual studio to the running website. You can do this via Debug -> Attach to process. You can then debug like you would the C# code.
 - Debug within the browser, either with the standard debugging tools (F12) or with something like FireBug.

When I do this I get a new entry in the Solution Explorer:
Script Documents
---Windows Internet Explorer
------index.html
---------a lot of .js files

Is it only those .js files I can use to set breakpoints in? If I try and set a breakpoint in the JS files in Base Files/Common/html/js it gets disabled.

For example, I would like to understand how the popups work and why they aren't stackable. I don't like how it is now where you miss popups if there are more than on in a short time. But it is not possible to set a breakpoint in _events.js, and it doesn't appear in the attached Internet Explorer process.

Sorry for all the questions, this is all new to me =)

[raptorjr]

So, I'm both trying to learn javascript and how HG works. This is for me extremely hard when I cant debug the javascript code to get a better understanding to what is going on.

Does anyone have any knowledge on how to debug the javascript code? I use Visual Studio and compile and start the project. I browse to the HG page, and then what? How can I set breakpoints in the javascript code? Either using Visual Studio or another debugger.

[bkenobi]

There are no breakpoints with the C# compiler for HG so I assume the same is true for the other languages.  I've found that the best bet in HG is to comment out sections that are problematic and just add them in small chunks until you find the bug.  As for debugging of compiled code that doesn't function as expected, I write to a log file but you can also use the built in logging or the notifications.

I've used Eclipse in the past for coding, but VS is also a good option.  I currently use Notepad++ with the language specific highlighting for coding HG and then copy that to HG for testing typically.  That's primarily because I tinker during breaks at work and then try it at home in the evening.

That said, I MUCH prefer a way to break the code to view values similar to how VBA in MS Office products works.  It's SOOOOO much easier to see what's going on and debug when you can view variable contents in real time.  However, VBA is interpreted rather than compiled so it's not apples to apples here.

[raptorjr]

Thank you for your reply. I know that there is a lot of things that could be helpful when writing code inside HG. Don't know if it is possible but would be really helpful.

But what I'm talking about here, and since I know where little about JS/HTML, is to debug the actual JavaScript code that HG is made of. I'm trying to learn and change things that I don't like since not much new is coming from Gene. I know I'm jumping into very deep water and was hoping that there is some people around here with the knowledge to add new functionality to HG.

And even if they don't have the time to make HG better maybe they know enough about Web development to give me some help. Because it is very hard to find help from others who don't even know what HG is.

Like know I'm trying to make the Add module dialog better. Don't like that you only can add one module at a time and need to open the dialog every time. It should behave more like the Module cleanup dialog. With a Listview and open until I'm done adding my modules to a group.

But I hardly know what I'm doing and mostly copy/paste from other parts of the code. But being able to set breakpoints in the JS code would really help and make learning a lot easier.

[bkenobi]

There are 2 users that have tinkered with the guts of the code.  If you look at the pull requests, I imagine you'd see who they are.  There were several discussions I recall where tools to use when compiling HG were discussed.  Also, there was some discussion on what needed to be copied if just the executable were being tinkered with.  I believe VS 2013 was one option and MonoDevelop was another.  The following thread is a couple years old but it has a similar discussion and a guide.

http://www.homegenie.it/forum/index.php?topic=646

[raptorjr]

I got everything working with Visual Studio 2015. But I don't understand how to use breakpoints in JS code. The C# code is not a problem, breakpoints work there. But most of the code is JS and it would really help if I learned how to use breakpoints. If it is even possible?

[dani]

JS works on the browser client side. I don't know how to put a break point on a browser. Yes you can easely put a breakpoint in C# code, because VS or  Monodevelop can run the C# code step by step, but they cannot interact with the browser.

[raptorjr]

Yes I know. But thinking it would be possible in some way because we have the source code. Can't understand how people can develop advanced webpages without proper debugging =)

On the other hand. Can't understand how Gene have created all the graphics either? I'm used to visual tools where you can move things around and change properties. What do you use to make something like HG? Notepad++?

I need help to understand the magic behind webpages, and I want to know the advanced stuff first. Don't have the patient to start from the beginning and come back in two years =)

[Bounz]

Hi, raptorjr.

About debugging JS code. You should do this in browser, I recommend to use Google Chrome, as it's developer tools are great. If you use Windows just open HG in Chrome and then press F12. Developer tools window will appear. It has a number of tabs, like Elements, Console, Sources, Network and so on.

For debugging JS itself you use Sources tab. On the left side you can see the tree of files and open one you are interested in, or press Ctrl+O and start typing the filename. When the file is open you can add breakpoints like in VS by clicking on the line number.
In the Network tab you can monitor all requests from client to the server and corresponding responses.

I recommend you to google how to use Chrome Developer Tools, it is very powerful instrument for developing web applications of any kind.

Also notice, that HG's UI is built using jQuery Mobile framework.

[raptorjr]

I haven't looked at Chrome yet, but will do that.

But one question. When the page is viewed in Chrome, the JS code have already been executed and produced HTML code? Chrome don't know where the sourcecode files are? Don't understand that connection. Or am I missing something obvious?