VS Code Has Dev Tools & Console!! No Need For Chrome Anymore 👋

[@codeSTACKr]

🦸 Become A VS Code SuperHero Today: vsCodeHero.com 🧑🏾‍🤝‍🧑🏽 Join my Discord developer community: discord.gg/A9CnsVzzkZ

[@luigis.3909]

You need a 21:9 monitor for this

[@AndresSaaN]

Or a 32:9 monitor 😄

[@prostaknaivnyj5976]

or 2 or 3 16:9 ones, its cheaper n more practical.

[@meikamandoliini]

I'm going 3 24" panels this setup. Should I go all identical or mix different panels?

[@Artaxerxes.]

@@meikamandoliini identical. No brainer

[@SolironBrightwoode]

I was thinking that too. But also, twins?

[@yroman11]

I probably won't change from Firefox Dev Edition, that being said I couldn't help but watch the whole video. It's so well edited and overall high quality that i ended up staying for the whole thing. Well done man!

[@codeSTACKr]

Thank you! I appreciate that 😁

[@kejith1004]

True, as long the Tabs of VSCode are stuck to VSCodes Main Window no need to change at all.

[@Datamike]

Pretty much this, except didn't watch the video through. At the end of the day, you can just title your vscode and browser, and you'll get practically the same effect.

[@blatchie4608]

I've been using Firefox Dev for a few months and LOVE it

[@johnselekta]

Another Firefox Dev edition user here, only thing is my Mac takes off when using Google Meet. Anything Chrome-based is way less intensive, it seems

[@musickumsolutions9445]

A clear, quiet voice + a well thought-out explanation = thumbs up. Thank you!

[@codeSTACKr]

Much appreciated!

[@andrewdillard5961]

What an intro! I think I got chills! Lol thx for the awesome content man!

[@ChristianHeilmann]

Excellent walk-through - thanks so much for this!

[@codeSTACKr]

You're very welcome!

[@bhutchin1996]

I get the following message: "Microsoft Edge could not be found. Ensure you have installed Microsoft Edge and that you have selected 'default' or the appropriate version of Microsoft Edge in the extension settings panel." I'm on Linux though.

[@coolcha]

Yeah I just have 2 monitors and put the browser in one window while the code is another. This feels unnecessary and overly cluttered.

[@loradio537]

for people with 2 monitors, sure, that being said, a second monitor for browser only is cheap, any 1080p monitor should do, but some people don't want a second monitor or don't need, let's say people who have ultra wide ones.

[@emmanuelbrown153]

Ctrl + windoow + arrow left or arrow right

[@Qman621]

Ok this is incredible! Finally I can use the developer tools to make changes once rather than fix it first in dev tools and then have to navigate to the right file and code section in VS code... was very cumbersome, this makes designing new page layouts so much more simple and intuitive - Thank you :D

[@thecodetex]

I saw this in Visual studio code's official KZbin channel already, hehe but excited to see your explanation 😀

[@codeSTACKr]

Hope you enjoy it!

[@thecodetex]

@@codeSTACKr Looking forward to it

[@anjanpoonacha]

I liked the outro. I am here since JavaScript January or before. Great content. And it's a great motivation to your kids too.

[@patrickstival6179]

Github Codespaces are heading the other way. Vscode inside Chrome

[@duckner]

3:47 for anyone who codes with more than one monitor (so like every professional) this is useless and you can just use the regular browser as you can't popout vscode tabs

[@StuartAylward]

Actually you can. cmd+k, then o. You're welcome 😊

[@FalioV]

If u consider HTML and CSS as coding, we have nothing to talk about...

[@OneAndOnlyMe]

@@demiann4160 I do pack a slim USB-C monitor.

[@KAZVorpal]

You should specify: Edge is LITERALLY Chrome repackaged. It is based on Chromium, just like Chrome is. Anyone hating on Edge is hating on Chrome.

[@vinaykumarbheemaraju]

Simple logic is even if every one has VScode installed. They finally need to open in chrome/mozilla/edge and no escape from this. So testing in these browser is very much needed :). Just my opinion

[@zekadnoureddine6018]

And my opinion...

[@stephaneandre8262]

This is so cool. It's easier now to work on my laptop. Perfect, thank you 😁

[@froggologies]

I have been using vs code for years and this is my first time using run debug feature. Thank you ❤️

[@codeSTACKr]

It's a game changer 😁

[@DiegoJGorzynski]

This comes in handy for me now, that I just debugged a webpage using the old way with chrome to learn right after that when I maximized it that everything was wrong lol

[@alejandrogonzalez1598]

How do i find a line of code by poscitioning the clicker on the browser, inside window in vs code o viceversa, ....????

[@semasus3830]

Why note just publish the video instead of making a pre-recorded premiere and posting a 20 second trailer of it and make people wait for two days? No point in that.

[@codeSTACKr]

All premieres are pre-recorded. That's how KZbin premieres work. I have other videos lined up to publish already ahead of this one.

[@juancasas7]

It's my lucky day, I use edge dev by default haha. Thanks for this u Invaluable information

[@codeSTACKr]

Great 👍

[@KAZVorpal]

No, like most pro developers I have three monitors. So I don't have the browser and IDE either tiled, or switched back and forth. That pretty much renders all of this irrelevant. I don't see anything that makes it worth running the OLE-looking setup, instead of separate monitors.

[@michaellarocca1435]

Awesome! Looking forward to this!

[@babykosh5415]

Jetbrains users say "WELCOME" we've had that for quite some time now.

[@eakzit3181]

Good it exists, but I won't use it. I keep my code editor vscode and I keep my browsers different...brave is the latest one I love

[@noelthomasbejoy3089]

Try vivaldi

[@Dexter101x]

Clearly a cool thing to do within VS code

[@ashwinnair9862]

Damn thunder client and now this I'm never minimizing my VS code anytime soon.

[@codeSTACKr]

You know it :D

[@HuyHoang-ly3ee]

buy a second monitor bro

[@hri7566]

alt tab moment

[@workingTchr]

2:12 "...because we launched with Edge.." That's where I got lost. Where did we launch with Edge?

[@viniciusmantovani8619]

I loved the font you are using... What font is that?

[@codeSTACKr]

It's a modified Fira Code font. Available with my course.

[@rabbitazteca23]

I WOULD use this if it weren't for the soo many steps I'd need to do first. I wouldn't mind switching to this setup if it were more streamlined and all ready in a click of a button. Microsoft has a plugin called Live Preview that works well and has a console tab. HOWEVER, (1) the device emulation shows the ENTIRE VS Code space and NOT just the actual webpage and (2) the console tab does not seem to work. Events I put in my javascript file does not seem to work and varaibles I declared and other objects does not seem to exist in the console tab. sad.

[@hbirtt]

Oh man. How cool would it be if you could pull the browser and dev tools out in its own window. Like you could have it on a second monitor. Wait...

[@BobWalsh47hats]

happened across this video this morning: good info, well delivered. I've subscribed and looking forward to more!

[@codeSTACKr]

Thank you!

[@savant_spoon_bender]

How do you get cursive attributes? I've seen comments written in a cursive font style too but never figured it out

[@codeSTACKr]

It's the font. My font has cursive italics. Not all fonts have it. Link to my font in the description.

[@Swenthorian]

This was a very good video: informed me of a handy feature, answered every question I had about it, did so methodically and well, and had minimal fluff. Subbed.

[@codeSTACKr]

Thanks!

[@filipdzankic3822]

Combine the integrated devtools, with some of the "Live server" VS Code extensions and you have live reload as well.

[@dominykasbobinas6158]

cant seem to figure out how to do it though

[@gwnbw]

@@dominykasbobinas6158 change url to port from live server 7:08

[@Aaditya1ad]

IE or edge might not be bad itself. It was Microsoft’s reluctance to play along with everyone in browser business that caused lots of devs spend sleepless nights. And people remember. Don’t use edge, they can beg now. The last nightmare they caused has lasted long enough, we are just done shaking it off (almost).

[@luv.matters]

Enable auto reloading does not work, and I have no clue why I have 4 sets of pwa-msedge in launch.js setting

[@tiagoagm]

Will never replace Chrome. Dev tools is far more than the Elements and Console. It is essential for us developers.

[@ahs1295]

edge & chrome both use same Chromium devtool

[@TaufiqRahman]

90 of the chome extension work for edge. Did not try the react dev tool. But I believe it should work too.

[@zakaryan2004]

@@TaufiqRahman I meant in VSCode DevTools itself, not in Edge.

[@ChristianHeilmann]

The tools are the same as the ones in Chrome and we're planning to add more features as needed. What are you missing that you'd like to see?

[@tiagoagm]

@@ChristianHeilmann Well React Dev Tools, Urql. How about testing performance with Lighthouse or Performance tab in dev tools?

[@VoiceofChaitanya2001]

Bro thanks for sharing valuable information👍

[@deepbreath7228]

Please help me. I am new to programming. How do I open Console inside VSC? Not debug console, but the actual console on Chrome. im learning JS

[@heroe1486]

Tiling Windows managers to do the same stuff more easily and more comfortably, or just second screen.

[@Coookmeee]

@codeSTACKr please can you make video on your complete setup and customisation of vscode... Please show us your set ... It is really sick and i am very very amazed... Please

[@YOUdudex]

Excited for this !?

[@ayerli]

I guess I fail to see the benefit. It’s just showing the browser inside VS Code, isn’t it? How is that different than stacking VSCode and Browser on one screen? Quite contrary, it makes life harder don’t you think? Oh yea, there was one thing that was useful; it opens up the css file after clicking on the file name on browsers style editor.

[@revolutionary_tower]

2 days of waiting, OMG!

[@codeSTACKr]

😂

[@vivekpadelkar]

i followed your steps but my debugger is still grayed out in vs code. its not working at all, would you lie to help me

[@ApoorvMote]

But I have my code in WSL2 and running on Windows browser. So Edge will be using on WSL not windows.

[@joaovictorramiresguimaraes9784]

Great vid, thanks for sharing. But the thing that really catches my attention is the "prompt" cursor... That's great. Is this an extension or video editing?

[@codeSTACKr]

Thanks! It's just vs code cursor settings.

[@thelazt16]

Damn nice tips, and now the debug can also work with chrome, so if you just want the console log you can just use chrome instead of edge. Now i don't need to split my monitor to 3 for vscode, chrome and the chrome devtools

[@igorskyflyer]

10:28, guilty as charged 🙋‍♂️🤝😂

[@FiveSolas1]

It would be helpful, thanks a lot! settings: 6:50 , 8:52

[@whiteimposter9304]

how can i open the web page, the link to it, i set my compiler, and started writing html, but how can i see the resulte

[@raiscl]

Why those hoops and loops to screen cast a browser if VSCode runs in a browser... it has JS V8, dev tools, etc.... it shouldn't open another browser, it has the ability to run another window.... these looks like marketing decisions that software engineer have to implement no matter how stupid they are.

[@SherBahadurPun]

Excited!!!

[@GadiedCarrero]

what is the name of the extension that gives you the name of the labels in cursive yellow?

[@destroyonload3444]

I'm happy to just not have the dev tools on the output browser. I think I would prefer them in VS Code. Thanks for the share.

[@NicholasWongCQ]

Why?? How is all these screens crammed up together gonna help with productivity?? Talk about fixing a non problem to create a bigger problem.

[@modz9711]

Hey is there a way to change the browser prompt again. I mean when the run and debug thing prompted for Chrome and edge options but I choose chrome and Now I don't know how to change it back to edge ?? Can someone help !? Thanks

[@pekkavaisanen5657]

Wow, Nice setup!

[@codeSTACKr]

Thanks!

[@generationwolves]

This is Microsoft's attempt at coaxing developers into using the Edge browser and Edge dev tools. I'll give this a hard pass.

[@Dexter101x]

Not too sure, but maybe you might be able to use firefox and chrome as well. Wait until Jesse says so

[@leonhma]

Edge is not bad but we all hate it

[@generationwolves]

@@leonhma It's probably because of Internet Explorer's terrible reputation. Even though I know that Edge is based on Chromium, I just can't bring myself to use another Microsoft browser. Developers may warm up to it in the future, but right now, most of the devs I know have no intention of using Edge for development.

[@hexerei02021]

@@generationwolves Edge and chrome are the same thing. One is blue the other yellow.

[@macmanuelodumeru3708]

Edge is actually arguably better than chrome

[@shrshk7]

Is it just me or does anyone use MacBook 3 finger swipe to toggle between browser and IDE

[@Pro-zw2bj]

Hi i tried this but i get only the dev tools not the webpage

[@marceloribeiro83]

Why vscode do not implement your own native preview?

[@FririkurEllefsen]

Thank you for this helpful tutorial on vs code and console log. I just subscribed.

[@frs4579]

How to switch after from edge to chrome in debugging?

[@jccnguyen]

We need ultrawide monitor for this setup :)

[@min11benja]

So could this be run on an Ipad Pro? Like run vscode online and debug from the ipad pro

[@keithprice7119]

This just looks cluttered. I never have the browser open alongside Vs code. I have the browser in another workspace and switch back and forth. It's really easy and allows me to avoid a cluttered set up like this.

[@zachj7078]

MY refresh button wont work for some reason....

[@nri_raj]

This is very nice and I always wanted to have browser inside VSC, it was there but not opening custom URL, this one is fine but it says tab is inactive which is very annoying please advise how to fix, you have two monitors so fine, for one we need to minimise and then once minimise it says tab is inactive.

[@michaelravan]

As always… very nice work… nice work to Firefox and chrome as well. Proud of edge tho

[@michaellarocca1435]

Excellent presentation, Jesse! Having a console log built-in will make the transition from environments such as freeCodeCamp and Code Pen much easier! ( I had difficulty! ) With this new VS Code set up, will we still need Live Server?

[@codeSTACKr]

Thank you. Live Server is optional. You could use it with a vanilla JS project.

[@PhuongNguyen-zb2en]

Will it work well on big project like React or something like that? I mean pretty big project, hundreds of components and files

[@electricz3045]

Hopefully jetbrains add something like this to their IDEs too!

[@income3000]

is there anyway to exit out of the tablet view?

[@jmstampe]

What if you typically do quick, little client side dev “hacks” on a classic view SharePoint site using content editor or script editor web parts? Can you debug this way? I would assume probably not but always curious.

[@PaperBenni]

Wait when was this introduced? I thought this has always been there since vs code is a browser app

[@akbees235]

I usually have the dev tool, vs code and the browser each on 1 full screen Also cmd on another screen to run my project I like to keep everything in front of me big enough

[@mcm4981]

Thanks for all your tutorials, I've been going through JS tutorials and some of the react vids. It's clear from what I have seen, and the comments that you have the gift of clear teaching. Well done. I have a question about my next steps. If you were in my shoes, with little dev background, and you were tasked to build an a mobile app, where would you start? As I see it... Learn JS basics Then learn framework, React? Are there mobile app extensions you would recommend in Visual Code? Build app in Visual Code? Thanks for any help, I'm really just interested in mobile dev. I've done a lot of websites using WP.

[@mcm4981]

And BTW... I have designed the app already. Frontend is almost done. It's the coding I need to do.

[@andrewdillard5961]

@@mcm4981 Look into Flutter or React Native. Good luck!

[@mcm4981]

@@andrewdillard5961 thanks, that was where I was headed, or kotlin?

[@andrewdillard5961]

@@mcm4981 if you're targeting Android. Flutter is cross-platform.

[@mcm4981]

@@andrewdillard5961 yes, targeting android. Thanks, I'll look into it.

[@marloeleven]

The mandatory explanation of using Edge ahahaha

[@dougsteel7414]

I'm highly skeptical of MS implementing CSS in any normal kind of manner!

[@ahmedma527]

Can you please show us how to attach to a process instead of launching a new one ("request": "attach")? it is very helpful because with attaching, I would not lose all my bookmarks also I do not have to reload the page and lose the app state. It worked perfectly in Visual Studio but (same concept), and that exists here in vs code as well but we need to figure out how to do that (attach). I tried my self and I checked the documentation and other source but did not work out. Waiting for your help, please. Thank you in advance.

[@glowiever]

also, what if we use js framework loke vue/react? there's no html to start debugging with (in dev mode)

[@dtkages]

I love the look of your vscode. What's the theme you use?

[@codeSTACKr]

codeSTACKr theme :D

[@dtkages]

@@codeSTACKr thanks a lot. I'd start using it.

[@kevincorridoni]

How do i configure the webRoot for another port??

[@muhweziarnold9343]

I absolutely loved it. Will definitely watch it over till I catch speed on the tip.

[@kawaiihikari0]

Also edge has image creator just like dall-e also ChatGPT with bing AI

[@victorbadaro]

Oh man That's super cool! Thanks for the great content

[@codeSTACKr]

You bet!

[@meraatmostafavi7758]

thanks it was very helpful ;))))

[@Reaper_f30]

Question mate, how would this work on MAC, would the default browser be safari?

[@rhapsodi]

Any chances to move debug tools under the preview window? Thanks for video.

[@lancemarchetti8673]

Does anyone know if the VScode console can display Base64 image src tags live?

[@michaelanggriawan8131]

I think it's depending on your monitor screen, if i have wide screen monitor, probably this will be good option if not i prefer chrome.

[@nephylumsaracen6722]

My dev speed just got Explosively fast!!!!

[@samvanderstoop179]

Can I split the terminal panel so I can see terminal and debug console at the same time, below code and devtools?

[@newwayto2323]

still use firefox for web design (it have tools no other browser had)

[@chovnyk_pluve]

What about some angular localhost hosted app? Will they work together?

[@codeSTACKr]

absolutely!

[@joaopauloalbq]

If Edge is basically Chrome, don't use Edge, use Chrome...

[@Knards]

How does this work if you are importing your head and footer into the page, and using a php file where you are using the html?

[@deki90to]

I stop using chrome long time ago, they keep using ram but bring nothing new