WebStorm Review

Hi,

Sorry about this long post, but I had to do it!

I am a professional web developer, but recently have been looking for a modern IDE to use on my personal projects.

That's why I decided to try WebStorm, and I've been using it extensively and customizing it to match my complex setup for the last 3 days now.

So, I am going to let you know what I found out, compared to the setup I usually use. I am doing this, basically so that someone who is more experienced with the tool can tell me if I am wrong (or just being too picky), or not doing something right with regards to the issues I found.

First of all, I think the product has huge potential. That's the main thing and that's why it bothers me that there are some fantastic tools with huge potential, but they lack some simple, yet really important features.

Ok, now straight to the point:

  • Editor : this is probably the best part. I love it. Can't really complain about anything here: navigate to other files works perfectly, color customization is awesome, autocomplete great, these are just some examples, but everything that I can think of is great in this editor. Also I must say I can't think of a better editor for web development, from all the IDEs I've tried.

  • Integration: This is another great achievement, everything is integrated. There are other IDEs that are fully integrated as well, but I think the way WebStorm implements this integration, and the visual look of it... it's just more polished, more elegant. I am talking about node, grunt etc.

  • Debugger: Ok, this is the main problem for me with WebStorm (and the reason why I'm writing this post), because the Javascript part of the debugger is perfect and I would LOVE to use it, but I can't, and that's because the CSS/HTML part doesn't follow along.


My previous background is with using Chrome Dev Tools, and I've been using it for many years.

Please believe me, I would love to use integrated debugging, but with the following list of issues (which for me basically (since I can't run it in parallel with CDT unless I open two instances of the page) render WebStorm's debugger totally useless) it's not going to happen, so until this gets fixed, you'll still see my CDT on top of WebStorm.

1) Right click page element on browser and Inspect in WebStorm not working as intended (?). Last thing I want to do is to go around staring at huge html source files (or clicking in 30 expand arrows on the dom structure tree) looking for that <a> tag to shift+click it for God's sake!

2) Have a look at CDT Elements -> Styles tab. There you can see all classes applied to an element. How can I see this with WebStorm's debugger ? As far as I know I can't. I can see the classes applied to the element on the HTML markup, but what about combined selectors and pseudo selectors (and its inherent styles) / inherited classes ? What about adding / modifying those styles on the fly, just to try some combinations ? I'm not sure about other people, but for me it's just impossible to develop a web site or app without this.
There is another well known free fully integrated IDE that implements this in a much better way, even though that implementation is lacking other features as well, but that's another story.

3) CDT Elements -> Computed. Here we go again, how can I know the width of a component that doesn't have a class explicitly stating its width on WebStorm ? Once again I can't. And this is another Dev Tools feature I use a lot more than just a few times a day.

4) Editing styles : When you do go past all those problems on WebStorm and actually control click a class it goes off to my app.css source file for example. That's great and I can edit the value there, so let's say I do that. So now the CSS file is changed, so everytime I refresh the page I still see my changes, which might or not be desirable.
Let's say it's not, what happens is I have to fire my grunt less task to restore the original app.css (assuming I want to use Grunt for that). Problem is, it's currently too cumbersome to start grunt tasks, I have to open the grunt panel, take the mouse there, click run less or default tasks and that's a lot of work. Keyboard shortcuts for running grunt tasks are urgently required for me!

The first 3 issues, clearly define the need for a Styles Tab on WebStorm debugger, in fact I'm not sure why it's not there, it just doesn't make sense (could it be that I just didn't find it ?).

But what I really would love to is for me to actually have missed something here, or maybe someone who's gone through this madness to post some of the workarounds they used for these issues so that I can go full WebStorm on them!

So, that's the overall view I have on it, superb potential, but I won't be able to use some of the functionality with all that potential in it, just because certain details are not working properly (or at least I don't know how to get past those limitations).


Thanks.

Regards

Please sign in to leave a comment.