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
Related
I am coding a React page with VS Code.
Suddenly, some snippets like rfce started not working even if it's never given me problems. I don't know what's wrong.
picture of before
picture of now
What I did recently was just updated react-router-dom to version 5.2.0 and npm install it.
React snippets are not built-in. That one for example comes from this extension.
Make sure you have it installed and enabled, and that you are working in a file with the proper file extension for them to work.
If on windows, use -rfce instead of _rfce. This worked for me!
I went through the same thing. You can try uninstalling and then installing the extension again
Those React snippets what you are talking about are not built-in, those snippets are coming from an extension.
That extension stopped working for you because you may change some of your settings.
Make sure you have it installed and enabled, and that, you are working in a file with the proper file extension for them to work (try: .jsx & .tsx).
If they are still not working, which was the case at me also, check your settings, because some of the settings can interfere, and make the extension stop working.
Open settings.json by: CTRL + SHIFT + p , type: settings.json, select: "Open settings (JSON)"
Check in the settings.json file if the following setttings are different than mine:
"editor.snippetSuggestions": "top", /*make sure this is NOT "none"*/
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
"editor.wordBasedSuggestions": true,
"html.suggest.html5": false,
"typescript.suggest.paths": false,
"javascript.suggest.paths": false,
As fast experiment you can copy the whole code, paste it at the end of the settings.json, save it, restart VSC. If it solved your issue, you can sort the commands one-by-one, to find out which caused the issue of yours.
It might not work, if you use the same file name like Rfce.js
Ensure that the file has extension js, ts etc.,
Uninstalling and installing React snippet from VSCode Extension might work.
Go to Preference - Settings - Extensions - Search for React Snippet and check if the values are correctly checked in.
It seems like that React snippet is not working properly, try to download it manually and install it through the link to the vss file and now install from Vss option in the extension section
I had to uninstall the snippet extension I had which was:
React-Native/React/Redux snippets for es6/es7 v2.0.6 by: EQuimper
and I used the extension:
ES7 React/Redux/GraphQL/React-Native snippets v1.9.3 by:
rodrigovallades
Launch Quick Open:
Linux: Ctrl+P
macOS: ⌘P
Windows: Ctrl+P
Paste the following command and press Enter:
ext install dsznajder.es7-react-js-snippets
I think you unfortunately uninstall it.
you have to install.
ES7+ React/Redux/React-Native snippets
in visual studio. Hope it works
My snippets worked as I thought they should once I fixed auto imports from this post by setting includePackageJsonAutoImports to always on. I used to have to type "-" before they would come up.
Visual Studio Code - Auto Imports / Quick Fix does not work
When I launch my React application I have a strange output in the console, and I am really curious about it:
I think i could probably be missing a parameter referencing the version of the app, just need some Stackoverflow clarity. Here is my main.js where you can see the issue (line 42):
Thank you!
It's the Katalon Recorder Chrome Extension. If you hover over main.js tab you'll be able to see the location of the file.
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 use command react-native init "name project" then open vscode appear to have error message code. (image)
This is what you need to do with VS Code, observe the gif carefully
Steps to resolve error
1. Go to extension
2. Click on more (...) and select Show Built-in extension
3. Search "TypeScript and JavaScript Language Features" - yellow & blue icon
4. Click on Setting icon of extension and select Disable (workspace)
5. Click on Reload / Restart Required
If you are getting this in React Native its probably a known bug in VSCode, that when Google Flow (which competes with MS Typescript) is coded, shows errors erroneously mentioning Typescript.
Your current .js code is supposed to be preprocessed by Flow into another .js file with "proper" js.
So make sure Flow is installed and then disable the Typescript parsing support. Here's the official answer on the Flow installation webpage:
Set javascript.validate.enable option to false or completely disable
the built-in TypeScript extension for your project (see gif below)...
Otherwise, you may want to stay as is and just change your code as suggested by C2P1 on March 19, 2018 on the github issue 631
To disable the [js] parser (connected to Typescript),
In VSCode menu: File -> Preferences -> User settings, (or ctrl+,) and add the following line
"javascript.validate.enable": false,
This answer was completed after seeing Idan Dagan's answer (Not the accepted answer) here: js 'types' can only be used in a .ts file - Visual Studio Code using #ts-check
And here's an excellent albeit old page about setting up the react-native environment, from Hackernoon. (You also have the VSCode React-native-full plugin)
Just disable built-in extension for TypeScript in VSCode. On the VSCode Extensions choose "Show Built-in Extensions" and then search for "TypeScript and JavaScript Language Features", Click disable then reload the VSCode. It works for me
In VScode
Press
CTRL + SHIFT + P
Use this command
Open User Settings
copy and paste the next line in the search bar in settings
#ext:vscode.typescript-language-features
ready uncheck JavaScript validation
Helped me to resolve
To disable the [js] parser (connected to Typescript),
In VSCode menu: File -> Preferences -> User settings, (or ctrl+,) and add the following line
"javascript.validate.enable": false,
This is what you are looking for. Unfortunately I haven't Googled a proper solution but we have to disable some JS checking.
https://github.com/Microsoft/vscode-react-native/issues/631
I've solved this with a plugin for VSCode "Flow Language Support". It will control the errors of the code instead of the plug-in TS-JS (built-in plugin of VS Code). In Details of plugin, guides you how to disable the original plugin TS-JS VSCode.
instead of disabling Typescript and Javascript language features extension, you can go to the extension settings, find the option Javascript > Validate: Enable, and uncheck it to remove any warnings.
I'm starting to learn angularjs , but i found some things that didnt make sense for me. Im using chrome into a windows 8 machine.
First i downloaded the angularjs zip version from : https://angularjs.org/
folowing i did unzip the files in some directory.
Then i wanted to just take a look into the documentation into angular-1.2.27\docs\index.html.
The result is weird ,the menus doesnt works, the screen takes a long time to load and let it with a loading message into the middle of it.
Does it needs to be in a server ? since its all about javascrit it shouldnt work all by himself?
Well for anybody that arives here, the question i raised was a misundestand of the Tutorial and the other places i read about it.
In the case above, my mistake was that i suposed that i needed do run the npm install anywhere , but it should be run inside the project that needed the dependences that are related to.