debugging css right click on browser inspect

[muted karma]

Hi i am at html css, build a google clone project, where i have to inspect my code by right clicking on browser and choosing inspect so i can see my code, for the google project,

But when i do that i instead get to see the whole scrimba code and not my simple google project.

Can anyone help me tell me what am doing wrong?

I get this second image instead…

[fresh marsh]

Hi @muted karma ,
I recorded this video to demonstrate hoe to access devtools on scrimba. Should help: https://www.loom.com/share/d27a81f3881c4eb38a54a2eb69fc8235

[earnest orchid]

@fresh marsh did you send the link to the correct video? Your video shows how to use the Scrimba video editor but I think that @muted karma was wondering how to use the browser's DevTools... do you have a video for that?

[fresh marsh]

Quoting Moshtak

But when i do that i instead get to see the whole scrimba code and not my simple google project.
I understand that he wants to access devtools on a scrim.

[earnest orchid]

If you're trying to use the Chrome DevTools you must find the .js file that represents your project. This can be a bit daunting... In my test scrim I found it under:

/top/index.html/cw0.scrimba.com/assets/src/sw/index.js

BUT you can leverage the javascript debugger command to find it for you!!

So, in your source just write a line in your source like so (I like to put it at the top of the file or near where you want to inspect):

// some other JavaScript...
console.log("what's going wrong here?");
debugger;

When the debugger command is hit Chrome will break and popup your file in the Sources tab... voila!

[muted karma]

hi thanks for the replies, am not sure if you misunderstood me, but what i wanted to know is i am doing the google project for HTML CSS, and to inspect the code when i right click on the video, i get to see the whole scrimba code, and not the code for the google project, how can i access the google project code and debugg it.

sorry for the confusion 😦