Blog Archives

Using IntelliJ IDEA to debug Firefox Extensions

Aug 26

Posted by

I have been a fan of JetBrains’ IntelliJ IDEA as an IDE for many years, and with WebStorm/PhpStorm (or IntelliJ with the JavaScript plugin) JetBrain really is on their way to having a great JavaScript IDE. What is particularly impressive is how WebStorm/PhpStorm is able to parse out meaning from untyped JS and have knowledge of many of the core JS libraries.

But one problem is that they don’t debug Firefox extensions. I often use ChromeBug for this, but sometimes it’s nice to debug right in the IDE. With a little bit of hacking I found a way to update their debugger so that it can also debug Firefox extensions.

You can get the code on GitHub at WebStorm-Firefox-Connector. I plan to update it with each update of the WebStorm Firefox extension until JetBrains adds this functionality themselves. I’ve submitted the changes to JetBrains as an issue in the hope that they will incorporate my changes into the main product.

To debug extensions with WebStorm/IntelliJ, do the following:

  • Install WebStorm and let it install the Firefox debugger extension
  • Determine what version of the Firefox debugger extension you are using (look in the Add-Ons tab)
  • Download the correct branch from GitHub for your version to replace the contents of the firefox-connector@jetbrains.com directory.
  • Edit the file extensions\firefox-connector@jetbrains.com\chrome\chromeFiles\content\scripts.js to add your chrome URL root to the variable enabledChromeComponents. For example, this allows me to debug an extension named myext:
    • ·         enabledChromeComponents: ["myext"]

 

Most folks won’t care, but it’s worth pointing out that you can’t use WebStorm to debug Firebug itself since they both use JSD, which only supports one debugger client at a time. JSD2 is supposed to fix this, but sometimes I wonder if JSD2 will ever really happen.

I do some work on Firebug, and I have looked a bit into creating a multi-layer-client wrapper for JSD, but haven’t had the time to get it actually working. Besides, the JSD layer is a bit tricky. Let’s just say I’ve gotten used to wishing JSD2 were on the horizon and knowing that it probably isn’t.

 

Update 2/14/11

They have updated the debugger extension (0.4.3) with a good chunk of my changes, but unfortunately not all of them. Looks like I’ll be updating the patched version of the debug extensions for at least a while longer. You can still find the any updates at GitHub.

Related articles
Advertisement

Posted in Code

Leave a comment

Tags: , , , , ,

IntelliJ IDEA Code Completion for Knockout data-bind attributes

Aug 16

Posted by

I’m a fan of Knockout. Among other awesome features, it allows you to create custom data bindings right inside your HTML using a data-bind attribute. The value of this attribute is actually a piece of JavaScript code that is executed each time the bindings are evaluated. These bindings can be simple or quite complex. Here is a simple example:

</pre>
<div data-bind="css: { profitWarning: currentProfit() < 0 }">Profit Information</div>
<pre>

Unfortunately, if you’re working with IntelliJ IDEA (WebStorm/RubyMine) you won’t get all of its JavaScript magic for the data-bind value because it thinks it’s looking at an HTML attribute string, so no code completion, etc.

But there is a way to fix this. IntelliJ supports something called Language Injection (originally called IntelliLang) to detect code fragments within another language, such as JavaScript code inside an HTML script element. Even better, IntelliJ lets you define your own Language Injections. So let’s create one for the Knockout data-bind attribute. It’s pretty straightforward to do, here are the steps…

  • In your project settings (even though Language Injections are global, they are defined in the project settings) select Language Injections
  • Click New then XML Attribute Injection
  • Then fill it out the dialog as follows (see screenshot below)
    • ID is the language type (JavaScript in our case)
    • Prefix/Suffix are used to make the data-bind string valid JavaScript code
    • Local Name indicates the attribute name where the Language Injection applies.

And now you will get all the IntelliJ goodness you love when editing your Knockout data-bindings like code completion, syntax/error highlighting, docs, and navigation!

You don’t have to stop with Knockout of course. You can also create more complicated injection rules using XPath or IntelliJ internal “Program Structure Interface Patterns,” which allow you map to the language structure itself.

I’ve created a few for other cases as well, which I’d be happy to share in another blog post if there’s enough interest. Just let me know in the comments.

Related articles

Posted in Code

4 Comments

Tags: , , , ,

%d bloggers like this: