Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Debugging JSX using browser / plugins

Tags:

javascript

reactjs

react-jsx

Is there a way to debug JSX files?

I am unable to see the .jsx files when I check the resources tab in either safari / chrome. Can we use a debugger ?

like image 398
user544079 Avatar asked Dec 17 '14 00:12

user544079

People also ask

How do I debug a JSX file?

You can view this source code under source tab in browser developer tools. (If you are using chrome/firefox then in source tab you can press Ctrl + P to quickly search for the file you want to debug/analyze.)

Does JSX run in browser?

As JSX is combination of HTML and JavaScript it is not supported by Browsers. So, if any file contains JSX file, Babel transpiler converts the JSX into JavaScript objects which becomes a valid JavaScript. Thus, browsers understands the code and executes.

How do I debug a browser response?

When debugging a React app, I often find breakpoints to be very helpful. There are two main ways in which we can use them: By writing the debugger statement in our source code. By clicking on a specific line of the code in the Chrome web browser (or Firefox, Edge, etc.)

1 Answers

After you install the Chrome Extension open the devTool (f12) and you can see:

  1. A new react tab - use to inspecting the react elements (like the regular inspect).

enter image description here

  1. In source tab (left panel) a new App list where u can see the JSX files and set break points in side your code.

enter image description here

NOTE: it might be necessary to restart chrome to get it going

like image 128
Elia Weiss Avatar answered Sep 17 '22 02:09

Elia Weiss
Sign in to Comment

Related questions

I need to calculate an elapsed time between two date objects
Google Map V3 context menu
CouchDB - trigger code when creating or updating document
How to declare character encoding in an INDIVIDUAL JS file?
Running Scripts in HtmlAgilityPack
jQuery position().top returns 0 rather than real value
Set charset meta tag with JavaScript
How to scroll to li element in a ul list
What is the difference between triggers and events in backbone?
Exception handling in Chrome extensions
How to create a custom input type?
Is there a way to find the div name out from from location(x,y cords)
AngularJS: Radio buttons do not work with Bootstrap 3
How to correctly chain conditional(?) promises with Q.js
Reflective material in THREE.js
Dynamically generated table - using an array to fill in TD values
var name produces strange result in Javascript [duplicate]
how can I reset a blueimp jQuery fileupload plugin?
How to use JS require() without Node.js
Angular UI-Router $urlRouterProvider .when not working *anymore*

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!