I have a React project setup using Create React App and the Typescript/React template. Everything seems to be working fine except for when I try to debug async/await functions.
The Chrome dev tools either have the breakpoints greyed out inside the async functions or when I try to click on a breakpoint (like line 6 below) it immediately moves the breakpoint to the line where the variable is set (to line 5).
Does anyone know how to fix this?
Related
OS: MacOS Catalina 10.15.5
Browser: Firefox 78.0.2 with React Developer Tools 4.8.0 add-on enabled
IDE: Visual Studio Code 1.46.1
Framework: React
This all of a sudden started happening today. Maybe Firefox updated in the background without me knowing, but one minute this never happened, and now it won't stop happening.
Problem: Whenever I save a local file I am working on that has a React error (could be a missing component prop, or improper syntax), Firefox reloads the page but then directs me to the Debugger DevTools tab, and pauses the page. I then have to navigate back to the Console DevTools tab, and manually reload the page. It's very frustrating.
When the browser re-directs to the Debugger, there is a dialogue on the page saying "Paused on debugger statement". The highlighted debugger code is:
// --- Welcome to debugging with React DevTools ---
// This debugger statement means that you've enabled the "break on warnings" feature.
// Use the browser's Call Stack panel to step out of this override function-
// to where the original warning or error was logged.
// eslint-disable-next-line no-debugger
debugger;t.apply(void 0,o)};n.__REACT_DEVTOOLS_ORIGINAL_METHOD__=t,// $FlowFixMe property error|warn is not writable.
The only way to stop this is to disable the React Developer Tools add-on. I don't know how to disabled the "break on warnings" feature. Any help would be deeply appreciated.
===
Edit: I looked at the React Developer Tools Profiler tab, went to Settings, then Debugging, and noticed that the "Break on warnings" was already unchecked. Still unsure what the solution could be.
It's a bug from the latest React Dev Tools (4.8.0): https://github.com/facebook/react/issues/19308
Workaround is to toggle the Break on Warnings setting on and then off. They've already cut a release (4.8.1) that fixes the problem.
I had the same issue. Toggling the setting on then off again fixed it.
I'm using Chrome. For example I need Component.jsx and put a breakpoint somewhere. I press F12, select Sources tab, press Ctrl+P but all I get is 1.chunk.js, bundle.js and main.chunk.js. It's pretty inconvinient to search for the position in the files. Can someone help me to find a solution?
Have you setup your debugger right?
Assuming you use VSCode, you need to install chrome debugger extension and add vscode debugging configuration to make it work.
VSCode team has put up a nice tutorial here: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial#_debugging-react
When I add breakpoints to source code in the Chrome Debugger, it works as expected.
However if I then remove the breakpoint and refresh the page, the breakpoints return. Likewise, if I close and reopen developer tools, the breakpoints return.
The only way that chrome forgets the breakpoint is if I close the tab altogether and open a new tab and reload the url, but as this requires a lengthy authentication process it is not ideal.
This is a react app, and I am using React Developer Tools Chrome Plugin - the breakpoints are placed in the source files not the transpiled code.
I am transpiling using babel via webpack, if it is at all pertinant to the issue.
Does anyone know if there is a solution to this issue - I can Deactivate all My Breakpoints, but they still return on a refesh (and are reactivated).
Thanks
I'm new to Webpack and React. I'm building an app using react, and today tried to create a build for the first time (i'm using create-react-app).
When trying to debug using Chrome dev tools, I can see all my Components using the map file generated by webpack/babel, however I get an error when placing a breakpoint inside a basic map method, and trying to access the value of the current item, or the mobx store items.
It's obviously working fine in development mode.
I guess i'm missing something with the configuration?
Thanks,
Currently fixed it by setting mangle=false in the uglify plugin. This causes uglify to not change variable names, so the map file has no problem to map to the real variables.
I have a small app that I have been working on the UI with the client. I am using TypeScript and Angular write the client code. I created a bar bones controller to deliver hard-coded data to the UI for layout purposes and it has been working fine in Chrome and Firefox.
Now that I am ready to start adding business logic I want to implement testing, so I installed karma (which has been challenging to say the least). When I run the code with karma using the Chrome browser I get a "function is undefined" error on a function exported from a TypeScript module that still works just fine when I use Chrome outside of karma (in WebStorm). The property is there, but the defined function is not.
The js generated code seems classic and conventional to me.
Can someone tell me why the code behaves differently under karma?
When I run the code with karma using the Chrome browser I get a "function is undefined" error on a function exported from a TypeScript module that still works just fine when I use Chrome outside of karma (in WebStorm). The property is there, but the defined function is not
Mainly just ensure correct order of file (script) loading.