Introduction
In the Vega Developer Tools, we provide Vega Studio on VS code, which provides a powerful debugging tool for React Native for Vega development. Also we support Chrome DevTools in order to give options for developers who are familiar with DevTools debugger.
However, while you’re debugging your React Native code, you might experience some difficulties on setting breakpoints. This document explains the tips for setting break points. Let’s dive deep on how you can set breakpoints effectively!
Breakpoints invalidated?
When you set a breakpoint while your app is running, you might see the break point is invalidated and the color turns white. Typically this happens when you set a breakpoint inside JSX (JavaScript XML) in React Native code. Given JSX code is converted into JavaScript (JS) code, the debugger cannot map the JSX line to corresponding JS line so that the breakpoints are unbound.
Workaround on setting a breakpoint inside JSX code
If you’re unable to set a breakpoint inside JSX code, one of the options is to add an Immediately Invoked Function Expression (IIFE) in conjunction with OR operator, inside curly brackets.
For instance, if you want to break at <YourComponent />, you can add IIFE as follows. You should be able to set breakpoint in the function.
return (
<View>
<YourContainer>
{(() => {
console.log(`--- YourComponent ${prop1}`);
return false;
})() || (
<YourComponent props={prop1} />
)}
</YourContainer>
</View>
Debug the unbound breakpoints with Chrome DevTools
There’s a way to debug transpiled JS code using Chrome Devtools. Read through this document about how to launch Chrome DevTools.
You’ll see the tooltip window when you hover the breakpoint over the unbound breakpoint. Click “troubleshoot your launch configuration.” link.
Debug Doctor window appears. Choose “Why my breakpoints don’t bind”.
You can check each breakpoint details. Check the underlined line, which shows the line number of JS file which is transpiled from your code.
Now open Chrome DevTools. Click Sources tab, you’ll see “&platform=kepler&dev=true&minify=false”. Press Option-O or Control-O, type “:<the line number shown above>”. You can jump to the corresponding code and set a breakpoint on DevTools.
Too many breaks?
If a breakpoint is called so frequently, it’s handy to add conditions by right-clicking the breakpoint, select “Edit breakpoint…”. You can add an expression to break, or set a hit count.
Conclusion
As discussed, setting a breakpoint could be a little bit different from what you’re used to. But using debugger will help you debugging efficiently, instead of relying too much on console.log. We look forward to your feedbacks - If you have any other difficulties on setting breakpoints, we’d be happy to add more tips in this KB article!