I could easily have missed a setting here or something, but I seem to be running into some snags as a result of the decision to show LWC files as multiple tabs in the same edit window. For most purposes this approach is great, but when debugging or trying to understand test failures, IJ navigates by default to the HTML editor tab rather than the JS one.
Here are a couple of repro scenarios:
- I run a Jest test. It fails, and gives me a stack trace. I click on a stack trace link, but that sends me to the HTML tab, thereby obscuring the JS I am trying to look at;
I set a breakpoint during debugging, and run until the breakpoint hits. IC navigates to the HTML tab for the LWC in which the breakpoint hit occurred, rather than showing me the JS.
- If I then go on to step through the code, the IC editor flips back to the first tab every single step I take. This is painful. Fortunately I don’t have to step through code very often.
In both of the above cases I must click the mouse on the JS tab to regain visibility of the code I am trying to debug.
Further complications can arise because the Jest test JS often appears in the same editor as the LWC JS being tested. and then sometimes IC insists on showing me the test when I want to see the LWC JS, or vice versa. (I haven’t yet quite figured out all the antecedent conditions leading to variations on this behavior.)
I was wondering if there was, or could be, an IC or IJ setting to show me these files in separate editor windows rather than as multiple tabs in the same window? Or perhaps there is a less drastic work-around here that I am not aware of?
Overall, I have to say that so far developing LWC in IC / IJ has been a great experience, so this is a relatively minor issue.