VS Code has a hidden build-in browser
Vložit
- čas přidán 29. 08. 2024
- Did you know that there is a built-in browser inside of VS code?
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowel...
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Love that the preview is real-time without saving. Thanks!
But html and css only, no JS
vscode is a browser 💀
exactly 🤣
i know right 😂
Yeah lol😂😂😂
Vscode browser in a browser
Exactly. Then you have DevTools right there too.
I love the 2nd option. Only downside is that “inspect element” doesn’t work. So you have to open it up in a browser to tinker around.
i think its working fine for me, but the downside is the inspect element is also inspecting the vscode window itself
1444A.E.
@@kevin3495 that is because, it itself is running in a browser
This may not save a lot of time in a day but over weeks this saves TONS of time
I always use live preview when I don’t have second monitor with me, it’s very useful especially I don’t have to save the file before seeing any changes
Only one that has worked for me. Thank you so much😊
Awesome, thanks! The response time on the live preview is immediate and no server required. I highly recommend this method.
That's amazing, didn't know about the built-in simple browser 🤩
You can also use that little logo with window and magnifier after installing extension.
Bonus tip for those using live server:
If you want your project to automatically save and update in the browser, simply click the "File" tab and then tick off "Auto Save", and let the magic happen.
Good to know that information
Thanks for the tips
Thanks for this short
I found using both options is the most optimal. Live preview doesn't work with python web frameworks like flask and fast API so 1st option works for python. 2nd option is nice for working with html,CSS,js coz the page auto updates but video controls are unresponsive so still have to open in chrome lol
I didn't know that, really helpful video. I can develop my website completely inside vscode now
Nice! I'll try it!
ty
Ok this is life saving!!! 🎉❤
Thaaaank you!
thank you
thanks alot
Wow this is preaty use full.
Wouldnt be surprised because VSCode itself is basically running on a browser itself. Its basically a website made into a desktop app.
Super cool, thanks kevin 👍
That really awesome i didn't know ❤
Amazing!
Next video -> there is a hidden AAA game in the vscode 😅
Oh Really ?
Thanks buddy! You just made my study time much more efficient. Sending over some coffee $...
thankss for this
my new favorite short
Really cool
I had no idea
This is freaking awesome ❤
interesting. nice to see you using vite as well!
Or ... You could set the language to markdown and use its preview (you can switch back to html after you have open the preview, it get update anyway)
HiYa Thabks for this video! So the first option is to key in your websites url into the search panel? I'm so confused, i'm learning HTML and CSS at the moment and have got to VS Code and opened my files (an achievment), but how do I make it live? And then how do I preview, and how do I then make edits to the code without it updating on the live website until i'm ready? Many thanks in advanced if you find time to have mercy on me and answer!😅
Thanks
Impressed me again Kevin
I love it
Bro the page that reloaded the code doesn't reload it why ??!!
The first one doesn't seem to work for me. Not sure why. Live preview is awesome though 🤣
Thanks 💯
Please kiven , we want a complex frontend mintor challenge 🤝🏼🔥
Brackets did this a lot better, being in the app makes resizing annoying and not worth the quick refresh button it saves you.
How to secure my website so no one can go into web dev or website source & copy all of my code designs & personal data ps html,css,js coding NO Wordpress or WIX. Please please
In any way to inspect element direcly in vscode? It will be super help full for long codes
It has dev tools in there, I think it's with one of those 3 vertical dot menus
It was available in atom, did lots of search to find that exact alternative for vs code , finally found one 🎉
CB.KARD.QR.
Don't think Live preview works with the real time update if you are using Sass though. Unless you start auto-save at 1s intervals ☺️
This is gold
Very handy although not perfect but definitely worth having.
Great
Thats sick. I cannot for the life of me get FTP to work with VS code though
nice, but how can i see the devtools?
master css
Could you please make a shorts video on how to run a live localhost server. Thnaks
That's because VScode is written on top of Chromium which is a browser itself
Wow
thank u sir ahh
The only problem with this extension is that it doesn't really have inspection tools like a real browser does.
This is nice...
I remember that live preview didn't support js is it still a thing or am i wrong?
May God bless, thanks!
Any one know how live preview works? Is continously refresh???
Cool 😎
It basically makes a codepen out of your vscode :D
It doesn't work with auth-based apps like using firebase
The first example is not hidden in any way, but sure, it's not obvious.
The second example is an extension and not part of VSCode.
for once, I knew something ☺️
more like
this version of chromium has hidden built-in code editor
Fair enough 😅
Can anyone tell me which font is used in the editor??
I think I use Consolas
@@KevinPowell Thank you so much for everything.You are the reason now I love CSS and everyday get to know new things about CSS. 😊
Good options but it doesn't work for me
Hi Kevin,
I am a backend developer.my team is asking to learn front end.How ever i am getting scaring of css.Could you please guide me.
can you open developer tools in simple browser?
I think so, since it does work with the extension, and pretty sure it's the same thing running for both.
Is this faster than opening a separate browser?
Yeah, but why though
VSCode is an electron app. So it's browser pretending to be desktop app.
did you know that VScode is just an app in a browser(electron)?
How to preview the php file
For php, you still need to run a server, since it's a server-side language. XAMPP was popular back when I was mucking aroun with PHP, no idea if it's still the go to or if there are newer alternatives.
@@KevinPowell thank you so much
They be better when it be option to woth with untrusted https certificates...
Vs code is built using electron and has headless chrome inside, so technically it is a browser
Not that it matters but vscode IS BROWSER, its built using electron which is basically a browser warpped around nodejs
what... 😯
I prefer Microsoft Edge Tools for VS Code also by Microsoft.
Does this work offline?
RAM usage ?
Did you just wake up?
das crazy, I spent so much time looking for a light browser to use in my potato pc, ended up with chromium and ungoogled chromium
Vscode can be used in a browser. So… you can use vscode in vscode ??
*built-in
Just an Iframe. This sucks
Now you know why it’s so bloated and slow.
VS Code is actually an electron app, so it's already a broswer pretending to be an app. It's built on Chromium, so this just exposes the actual broswer
@@KevinPowell Precisely.
Nice one
Vs code sucks
cap
fact
spill!