Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can not debug when using jsx loader

See original GitHub issue

Hi @ConradSollitt,

First of all thank you so much for building this awesome 20k library (babel standalone 2m) so developing react app without built tools is a breeze, highly appreciated!!!

I noticed a difference that the react jsx(or js) file was not shown in chrome dev tools when using jsx loader instead of babel, so debugging is not possible. See attached screenshots. jsxloader babel

This is the test project to reproduce this issue. Clone the project, run npm install, and test the two links in chrome:

JSX loader: http://localhost:3000/index.html
Babel standalone: http://localhost:3000/index-babel.html

Thanks again for your great work, look forward to your response. 😃

Best, Yang

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:8 (5 by maintainers)

Top GitHub Comments

3reactions

yangzhaoxcommented, Sep 8, 2021

Thanks a ton, Conrad! Your help is beyond my imagination.

3reactions

ConradSollittcommented, Aug 12, 2021

Hi Yang!

Thanks so much for your kind words about the jsxLoader I wrote; I really appreciate it!! 😄 👍

Also great job documenting the issue and creating the very clear test project. This makes it very easy for me to help with plus I can use it for new ideas to look up different debugging options.

For a quick background on how JSX is compiled to JS - in both Babel and jsxLoader each compiled JavaScript file or <script type="text/babel"> is appended as an inline <script> element to the <head> once it’s compiled.

For Babel Standalone I see the latest versions are including an inline source map and I don’t recall this with older versions of Babel so I’m going to research it more later this week or next week.

For jsxLoader the <script> elements include a few data-* attributes for debugging to show the original source of the compiled code and how it was compiled (IE, Older Chromium, Older Safari will use Babel Standalone).

Using this method the inline JavaScript doesn’t show up for debugging in DevTools because it’s added as a “VM” after the page is loaded; Chrome even assigns it “VM####” as the internal ID which shows in DevTools. The problem with “VM” scripts is that you can’t easily set a breakpoint and when you do set one it only lasts as long as the page is open.

Originally when I tested this Babel Standalone worked when using React DevTools addon however based on your issue and the great demo project you created I see it now works in Chrome by default. I can speculate on several reasons but rather than guess I will do more testing Thu or Fri (or mostly likely next week). Also in the past I found Chrome had worked better for debugging errors than Firefox or other browsers but I haven’t tested in a while so I’ll test all the browsers again.

In the meantime here is a “hack” that can be used to debug the compiled JavaScript. Until you opened this issue I haven’t even used this yet although I have had Chrome take me to errors at runtime but never was able to set a proper breakpoint before so thank you for your issue as it will help improve debugging with jsxLoader.

This demo is using the playground template: https://dataformsjs.com/en/playground

A version build with React and using the Monaco Editor (VS Code) is available here: https://dataformsjs.com/examples/code-playground-react.htm

The Monaco version allows for easier editing of JSX over CodeMirror and I intend on using it on the main site but haven’t made the time yet.

On the main HTML page I added a simple function; this could have also been added on a linked JS file (not JSX).

In app.jsx I call the debug function.

In DevTools I then set a breakpoint on the debug function and refreshed the page. Once the debugger was called I moved up the call stack to the previous function from the “VM” compiled JavaScript.

Then in the VM I was able to set a breakpoint on other parts of the code and once it was called Chrome stopped and allowed me to debug as expected. I will test Firefox and other browsers later to see how they handle it.

Related to this, an option is to keep complex logic (business rules, algorithms, etc) in a regular <script> tag or JavaScript file and call the needed functions from JSX. Then Unit Testing and Debugging can happen with standard JavaScript while the UI is rendered from React and jsxLoader. If Unit Testing of the UI is needed I personally recommend using a headless browser (Puppeteer or Playwright) to test the compiled result with a real browser (I can make time to help with examples later if needed).

So that is a quick hack on how to debug. As I mentioned I am going to research this topic in more detail to see if there are better solutions available now. I’ll let you know what I find and in the meantime if you have any questions feel free to ask and I’ll be happy to help!

Best, Conrad