Menu
I'm very new to JavaScript and React, I know that the "Sources” tab in chrome dev tools is supposed to let me look at my JavaScript files in the browser but they aren't. And I think this is why the program is not doing what it meant to.
index.html-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project One</title>
<link rel="stylesheet" href="./semantic-dist/semantic.css" />
<link rel="stylesheet" href="./style.css" />
<script src="vendor/babel-standalone.js"></script>
<script src="vendor/react.js"></script>
<script src="vendor/react-dom.js"></script>
</head>
<body>
<div class="main ui text container">
<h1 class="ui dividing centered header">Popular Products</h1>
<div id="content"></div>
</div>
<script src="./js/seed.js"></script>
<script type="text\babel" data-plugins= "transform-class-properties" src="./js/app.js"></script>
<!-- Delete the script tag below to get started. -->
</body>
</html>
app.js-
class ProductList extends React.Component {
render() {
return(
<div className = 'ui unstackable items'>
Hello Friend!, I am a basic React Component
</div>
);
}`enter code here`
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
796
asked Jan 27 '26 16:01
this question is answered here in this stack overflow post
Open the network tab in developer tools and refresh(f5 for shortcut) OR open chrome dev tools -> settings -> Restore default and restore
generally it should show you the source file like js files in source tab in chrome dev tools (for shortcut - F12) when you CTRL + P and then search your desire file
and if it is not showing for any obvious reason which is the file you are looking is not being called or used in the current UI page then
Opened the network tab in developer tools and refresh
if not works then
open chrome dev tools -> settings -> Restore default and restore
75
I know that the "Sources” tab in chrome dev tools is supposed to let me look at my JavaScript files in the browser but they aren't.
You add a directory, typically your-project/src via a dialog shown by Chrome. Then Chrome displays a narrow horizontal bar at the top of browser's window asking you to confirm Chrome's access to the chosen disk directory. The bar is easy to overlook.
Once you added a directory, it's not of much use if you cannot set breakpoints. Chrome needs source maps for that. If source maps are loaded then Chrome superimposes a green dot on the icon of each source file indicating the breakpoints inside this file can be set.
Looks like you are using semantic-ui with react. If you would like to have a boilerplate project with all that set up and detailed debugging instructions related to Chrome and its 'Sources' tab, then have a look at crisp-react
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
