When things were at their very worst: 2 Suns, Cross in the sky, 2 comets will collide = don`t be afraid - repent, accept Lord`s Hand of Mercy. Scientists will say it was a global illusion. Beaware - Jesus will never walk in flesh again. After WW3 - rise of the “ man of peace“ from the East = Antichrist - the most powerful, popular, charismatic and influential leader of all time. Many miracles will be attributed to him. He will imitate Jesus in every conceivable way. Don`t trust „pope“ Francis = the False Prophet - will seem to rise from the dead - will unite all Christian Churches and all Religions as one. One World Religion = the seat of the Antichrist. Benedict XVI is the last true pope - will be accused of a crime of which he is totally innocent. The Book of Truth
One thing i want to mention here: Teaching something is not easy as looking from outside. It is hard to keep viewers, subscribers level. Sharing content for everyone( No matter beginner, intermediate. etc). But you do amazing things. Everyone can watch and joy from your videos. Lets up to 1 million. ⭐
I'm so glad I stumbled on this channel, I just finished my first programming internship and I had essentially 0 web development experience beforehand, your videos helped me out a lot!
(On RUclips) -> Open Dev Tools -> Switch Responsive Mode to iPad / Mobile -> Network Panel -> Reload to view the requests in Network Panel -> sort by Time -> click the "videoplayback" request and open in New tab -> Right Click video and download. Congrats, you downloaded a youtube video.
Here's a neat feature: in the networking tab, you can edit a request (say, to an API) and change its headers, contents, etc. and resend it. It's very handy if you just want to test minor changes :D
Using the throttle feature on the networking tab on most major websites, help detect redirection pages in websites; This is mostly helpful when pen testing offline apps.
No matter if you're a pro developer using devtools constantly or a noob learning and practicing what you just learned in this video, you just might get bored of hitting f12 or ctrl+shift+J constantly to open up devtools. Right-click the icon of your chosen browser and open up properties. In the field called "target", which holds the path to the browser's launcher file, after the path in quotes add --auto-open-devtools-for-tabs. It should now look something like this: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs All instances of the browser need to be closed before this change takes action (check your taskbar running apps). Voila, each new tab you open will be waiting for you with devtools open.
When you go to settings, you can check under Preferences -> Elements -> Show user agent shadow DOM Then you can actually inspect pseudo elements like placeholder in the elements panel.
- Edge has a bunch of VS Code themes for the devtools - If you keep pressing Cmd + Q (instead of Cmd + W) and end up closing your browser, you can enable "Warn before quitting" in settings - You can add tabs to a group and minimize them all at once. Tab organization becomes much easier
My best favorite DevTools features: 1) Right click on a DOM element and select `Store as a global variable`. Now you are in console and variable `temp1` is created. Now to get amount of DOM nodes type: `temp1.querySelectorAll('*').length`. This helps you to know about your app DOM nodes when you are running Lighthouse. 2) Press `h` to hide/show DOM elements. 3) Drag one DOM element and drop in somewhere else up or down. 4) `Ctrl + z` always can be helpful when you are manipulating around DevTools. 5) Press `Ctrl + Shift + D` to change the position of DevTools vertically and horizontally. 6) `Ctrl + [` and `Ctrl + ]` to navigate between tabs in DevTools. 7) On a password input which the password is displaying as dots, right click and inspect element. Then change the type attribute from password to text. Here it is your password visible.
My Pro Tip: For checking responsiveness of a web page, you can use Device toggle, but if you want to see how a page will look on specific device, you can add new Device by clicking on settings icon ( top right side of dev toolbar ) and select Devices from the list and clicking add custom device. You can also add simulated locations from Settings > Locations. Another Pro Tip: if you want to use Dark Theme Dev toolbar with light theme chrome or Vice versa, you can do that by going to Settings > Preferences > Appearance > Theme.
For responsive design, you’re missing something: 1/ You can change the type of devices (desktop, mobile, mobile non-touch,…). Useful for working with :hover (on mobile with touch, people usually don’t hover) 2/ You can change the DPR of the screen (useful when you have responsive imgs for different screen like Retina or that kind of thing) On Firefox they are enabled by default (I guess) but you can enable it in the three dot button (Add device pixel ratio and Add device type)
Freaking amazing video. One of my fav tips: In the network tab, if you right click on one of the HTTP Requests and hover over "Copy", you can actually copy the request as a cURL commands. So if you go run that cURL command in a terminal, cURL will send the exact same HTTP Request that your browser did. Super nifty, and there are other "Copy as" options too, such as fetch, Node.js fetch, etc etc
The CSS transition also has a UI panel for the timing function (easing) which is almost impossible to code by hand if you're doing anything more than the simple stuff.
I've randomly stumbled across pretty much all these things while working, but having them all here in perfectly succinct and descriptive video is amazing.
As new learner, your videos helps me a lot, so many times I see something that can ease one of my dev struggles that I didn't even know what to search for it's fix.
My discovery of 2021 was "Emulate a focused page" in chrome devtools (you can get it from the [⌘]+[P] Command Menu, or Global Preferences). It's extremaly usefull when you try debugging an element that keeps disappearing when it loses focus once you start using devtools (in example dropdown list). Can't live without it since then
I have learnt a lot of new things that I have never worked with from your videos, like AWS, nginx, kubernetes, graphQL(and other dbs), typescript to name a few. One thing that I don't understand is how they work together. I would really love to see a video where you design a mock system using all of these (and possibly more) and explain each of their roles and why you chose it (kinda like your reverse-cloud migration video using raspberry pi). Whenever I think of a software architecture I think of them as several layers that interact with each other. However, I am unable to assign which layer what belongs to by watching a stand alone tutorial about a single tool. Btw, I am a college senior pursuing CS major and I love your content. Thanks for all the awesome contents.
When working with web workers you can use the application tab to see all working web workers. My other tip is you can edit local storage session storage and view cookies in the application tab. By far my favourite tab
The Sources tab is also a full-fledged debugger. We can put breakpoints, peek the current value of any variable by hovering, watch variables, etc. This feature is helping me so much with my Angular application.
Breakpoints, as in a lot of IDEs, have an ability to be ran conditionally, or can be transformed to "Logpoints" to show a specific message (including variables and expressions). Just right-click a line to add them, or edit existing breakpoints to transform them.
My tip - in the Rendering tab you also have the option of emulating vision deficiencies. Just one more tool in your belt to make your website accessible to as many people as possible!
The application tab is very useful if you are making a PWA. The manifest section can show you detailed info about your manifest, including previews of your logo (How it will appear once your PWA is installed in mobile devices of different sizes).
In the network filter, you can filter by request method by using -method:GET -method:OPTIONS -method:PUT. Easy way to find areas in a complex webapp where data is submitted without knowing what the routes actually are.
I like a lot how, after a few videos and deep diving into fireship's world, you simply start callim him Jeff, like you would call a friend that you know for a time now, thanks Jeff, you are awesome!
Pro Tip: 1.Add crome extension to dev tools bar: Vue Telescope, Vue.js devtools -> for vue; GraphQL Network, Clockwork for laravel, Save All Resources to download entire website. 2. Brave browser can block request coming from google analytics, which help while developing live site and testing website integrated with analytics. (for one who test website more than 100 times and google analytics track that request, you can also block ip but using brave is my choice).
Not sure how specific this is to the developer tooling in the browsers themselves, but the Quick Source Viewer extension and JSON Viewer in Chrome format raw source outputs as well as API responses which can be super handy!
To make source files changes persist through page refresh, use local overrides. It helped me a lot when I was dealing with an external (other team's) module connected to mine with a web socket. I needed to force some state and modify some function definitions in order to test my module's changes and see how they behaved over the socket. It was really helpful to make changes to their module on my own, instead of bothering the other team and asking them to deploy on the testing environments, just so I can experiment with my solutions. Really good stuff!
I learnt a lot just like from any other of your videos. Here are my tips: if you make a bookmark with the url starting with 'javascript:', the rest of the url will be executed(google doesn't allow it, so test it on another page), also webflow offers an incredibly handful html/css editor - you basicaly make the website without writing tedious html and css code
When he started talking about Brave in the end I almost screamed! I've been using it for a little more than a year and can NEVER switch back to chrome!
CMD + option (alt) + J to open *console* on MAC Also: CTRL + SHIFT + C (Windows & Linux) CMD + SHIFT + C (Mac) Opens up inspector with inspect element. Pressing ESC while inspect mode is active, will toggle the *console* While inspector is active, the combination of *CMD/CTRL + SHIFT + M* will toggle mobile mode
If you forgot the password on some website but chrome fullfill the input, you can quick preview the value. Just use the "inspect element" function with Ctrl+Shift+C and click on password input element. Then type "$0.value" into DevTools's console and voilà! Alternative, instead of the "inspect" function, you can right click on password input and click the last option - "inspect".
Hit Ctrl + Shift + c (Command instead of Ctrl if you are on mac) and hover over element you want to inspect. It highlights the HTML of the element that your cursor is at (and it’s applied styles of course). Works even if dev tools is not open.
I moved from Brave to Opera GX. It is pretty interesting. Give it a try. Some issues with extensions but they are actively working on improving the experience
You can also use the developer tools to inspect websites on connected Android devices with USB debugging enabled or Node.js programs. In Chrome, it’s located at chrome://inspect.
Pro tip: If you have an event listener for hover you can add a debugger line in any of the lines of the code while debugging after firing the event and the hover event will frozen so you can style it on the fly.
Pro Tip: On the Network Tab you can resend your POST request using "Replay XHR". Convenient that you don't need to resubmit your form manually if you are debugging your backend code
Tip: Sometimes you are entering password and the toggle button isn't there to view what you've entered You may inspect that element and change the input password to input text
How have I lived this long without knowing about design mode? I've been manually editing HTML tags if I want to mess around with a site but damn, that's much easier.
OMG!! Who would have thought that a simple chromium browser would be SUCH AN ADVANCED POWERFUL TOOL! After watching this video I would never be able to blame Chromium for anything..
If you're an animator you may be familiar with the after-effects graph editor or "curve editor". Well, Chrome has one built-in. If you define an animation-timing-function in CSS you can use devtools to modify the curve and tune the exact animation effect you want.
How is it humanly possible to fit this ocean of knowledge into a 9-minute video? We must protect Jeff at all costs!
In Jeff we trust!
Download Brave and send Jeff some tips lol
Hail him
I have to watch at 0.75 speed!
So his name is Jeff
Never once have you wasted my time ❤️
Thanks Jeff, I was just wondering how to trick my audience into thinking I made 12,000,000$ in two days!
“To investigate why your code sucks in more detail” 😂😂😂
lol 😂😂
More like seeing why ur code sucks in HD😹
When things were at their very worst:
2 Suns, Cross in the sky, 2 comets will collide = don`t be afraid - repent, accept Lord`s Hand of Mercy.
Scientists will say it was a global illusion.
Beaware - Jesus will never walk in flesh again.
After WW3 - rise of the “ man of peace“ from the East = Antichrist - the most powerful, popular, charismatic and influential leader of all time. Many miracles will be attributed to him. He will imitate Jesus in every conceivable way.
Don`t trust „pope“ Francis = the False Prophet
- will seem to rise from the dead
- will unite all Christian Churches and all Religions as one.
One World Religion = the seat of the Antichrist.
Benedict XVI is the last true pope - will be accused of a crime of which he is totally innocent.
The Book of Truth
Ouch
Been programming for 7 years and just today I learned about design mode haha. Thanks!
One thing i want to mention here:
Teaching something is not easy as looking from outside. It is hard to keep viewers, subscribers level. Sharing content for everyone( No matter beginner, intermediate. etc).
But you do amazing things.
Everyone can watch and joy from your videos. Lets up to 1 million. ⭐
Click the select button in the Dev Tools, then hover over an element and see if the contrast is good.
Come here to say the same thing, except with the shortcut (ctrl + shift + c), which is also open up the inspector, so you don't have to beforehand.
Firefox has a builtin screenshot tool which is much easier to use right at the click of a button. Much easier to use than the Chromium one.
1:20
I'm so glad I stumbled on this channel, I just finished my first programming internship and I had essentially 0 web development experience beforehand, your videos helped me out a lot!
This video is the "missing semester" for front end devs.
You don't have to call them out like that
Dev Tip: If you're using an Array or an Object, don't use console.log(), use instead console.table(). Thank me later.
But why
@@NEWTR0N_MUSIC it's gonna log a table and it's easier to read it that way (:
@@MiguelReyesDeveloper ohk thanks 👍🏻
(On RUclips) -> Open Dev Tools -> Switch Responsive Mode to iPad / Mobile -> Network Panel -> Reload to view the requests in Network Panel -> sort by Time -> click the "videoplayback" request and open in New tab -> Right Click video and download. Congrats, you downloaded a youtube video.
This doesn't work for me.
That’s really cool, but I’ll just use my favorite free video downloader app. lol
RUclips-dl
Pro tip: you also can use the sensors (5:49) to test your string localization for dates and currencies in different regions
Here's a neat feature: in the networking tab, you can edit a request (say, to an API) and change its headers, contents, etc. and resend it. It's very handy if you just want to test minor changes :D
How? That's very neat
How?
How?
how?
How can you elaborate?
Using the throttle feature on the networking tab on most major websites, help detect redirection pages in websites; This is mostly helpful when pen testing offline apps.
No matter if you're a pro developer using devtools constantly or a noob learning and practicing what you just learned in this video, you just might get bored of hitting f12 or ctrl+shift+J constantly to open up devtools.
Right-click the icon of your chosen browser and open up properties. In the field called "target", which holds the path to the browser's launcher file, after the path in quotes add --auto-open-devtools-for-tabs.
It should now look something like this:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs
All instances of the browser need to be closed before this change takes action (check your taskbar running apps).
Voila, each new tab you open will be waiting for you with devtools open.
When you go to settings, you can check under Preferences -> Elements -> Show user agent shadow DOM
Then you can actually inspect pseudo elements like placeholder in the elements panel.
I decided to learn Angular recently and found your Angular videos, good content you've got there
New Angular content is overdue on this channel
@@Fireship attempting module federation with WP5 & angular 11. do you have any good pointers/materials for reference ?
Design mode?? That's fucking sick thanks Fireship
Yeah man that flipped me
- Edge has a bunch of VS Code themes for the devtools
- If you keep pressing Cmd + Q (instead of Cmd + W) and end up closing your browser, you can enable "Warn before quitting" in settings
- You can add tabs to a group and minimize them all at once. Tab organization becomes much easier
My best favorite DevTools features:
1) Right click on a DOM element and select `Store as a global variable`. Now you are in console and variable `temp1` is created. Now to get amount of DOM nodes type: `temp1.querySelectorAll('*').length`. This helps you to know about your app DOM nodes when you are running Lighthouse.
2) Press `h` to hide/show DOM elements.
3) Drag one DOM element and drop in somewhere else up or down.
4) `Ctrl + z` always can be helpful when you are manipulating around DevTools.
5) Press `Ctrl + Shift + D` to change the position of DevTools vertically and horizontally.
6) `Ctrl + [` and `Ctrl + ]` to navigate between tabs in DevTools.
7) On a password input which the password is displaying as dots, right click and inspect element. Then change the type attribute from password to text. Here it is your password visible.
I'm an automation engineer and this really helps me. Thanks dude
I am a simple person, I see Fireship's video I click it.
Super useful high-density essential knowledge. Thank you!
I gotta give the award for condensing content to you man. nice work
Every single one of these tips are valuable. You sir are a treasure to the dev community
My Pro Tip: For checking responsiveness of a web page, you can use Device toggle, but if you want to see how a page will look on specific device, you can add new Device by clicking on settings icon ( top right side of dev toolbar ) and select Devices from the list and clicking add custom device.
You can also add simulated locations from Settings > Locations.
Another Pro Tip: if you want to use Dark Theme Dev toolbar with light theme chrome or Vice versa, you can do that by going to Settings > Preferences > Appearance > Theme.
Things I learned for years squeezed in 9 minutes. Huge respect!
No matter how skilled I am at a subject, I always learn something new from your videos.
For responsive design, you’re missing something:
1/ You can change the type of devices (desktop, mobile, mobile non-touch,…). Useful for working with :hover (on mobile with touch, people usually don’t hover)
2/ You can change the DPR of the screen (useful when you have responsive imgs for different screen like Retina or that kind of thing)
On Firefox they are enabled by default (I guess) but you can enable it in the three dot button (Add device pixel ratio and Add device type)
Not just resizing window only :)))
Freaking amazing video.
One of my fav tips: In the network tab, if you right click on one of the HTTP Requests and hover over "Copy", you can actually copy the request as a cURL commands. So if you go run that cURL command in a terminal, cURL will send the exact same HTTP Request that your browser did. Super nifty, and there are other "Copy as" options too, such as fetch, Node.js fetch, etc etc
The CSS transition also has a UI panel for the timing function (easing) which is almost impossible to code by hand if you're doing anything more than the simple stuff.
I've randomly stumbled across pretty much all these things while working, but having them all here in perfectly succinct and descriptive video is amazing.
As new learner, your videos helps me a lot, so many times I see something that can ease one of my dev struggles that I didn't even know what to search for it's fix.
Damn bro the way you do videos is amazing just the first 15 seconds had me hooked
My discovery of 2021 was "Emulate a focused page" in chrome devtools (you can get it from the [⌘]+[P] Command Menu, or Global Preferences). It's extremaly usefull when you try debugging an element that keeps disappearing when it loses focus once you start using devtools (in example dropdown list). Can't live without it since then
Amazing work dude. Love the content. Keep it coming
I have learnt a lot of new things that I have never worked with from your videos, like AWS, nginx, kubernetes, graphQL(and other dbs), typescript to name a few. One thing that I don't understand is how they work together. I would really love to see a video where you design a mock system using all of these (and possibly more) and explain each of their roles and why you chose it (kinda like your reverse-cloud migration video using raspberry pi).
Whenever I think of a software architecture I think of them as several layers that interact with each other. However, I am unable to assign which layer what belongs to by watching a stand alone tutorial about a single tool.
Btw, I am a college senior pursuing CS major and I love your content. Thanks for all the awesome contents.
👏 Jeff thanks for your amazing content - this is hours of tutorials (and $$$) condensed in 9 minutes! You are a rare diamond!
There's channels out there that you don't really want to subscribe, but this channel is another thing
When working with web workers you can use the application tab to see all working web workers. My other tip is you can edit local storage session storage and view cookies in the application tab. By far my favourite tab
Thanks for not stretching this and push as much info as possible in just 9 mins
The Sources tab is also a full-fledged debugger.
We can put breakpoints, peek the current value of any variable by hovering, watch variables, etc.
This feature is helping me so much with my Angular application.
I liked how we can grab the current element and manipulate it. Thank you, it's simple and straight to the point
Just grabed my popcorn
im here aswell lmao
Ctrl Shift C to quickly click an element you want to inspect
without having to open the dev tools first.
Thank you!
These are all some very useful tips that can save me a lot of time which i will never use bcs ill forget about them by the time i need them
100% true
Breakpoints, as in a lot of IDEs, have an ability to be ran conditionally, or can be transformed to "Logpoints" to show a specific message (including variables and expressions). Just right-click a line to add them, or edit existing breakpoints to transform them.
Most tech videos I watch at 1.5-2x speed. This is the first one that I felt like I needed half speed.
So many brilliant tips! Thanks for taking the time to research what's available and making it easily accessible and consumable for us.
Another video let's go! May I know where you get your background music?
AudioJungle usually
@@Fireship thank you!
My tip - in the Rendering tab you also have the option of emulating vision deficiencies. Just one more tool in your belt to make your website accessible to as many people as possible!
Best web dev channel
The application tab is very useful if you are making a PWA. The manifest section can show you detailed info about your manifest, including previews of your logo (How it will appear once your PWA is installed in mobile devices of different sizes).
Bro, you always push out the most condense yet informative content! Love your work man.
man, like how do you publish all of these awesome videos in such a short time, like how??? I'm a fan
Jeff is a gem. We have to protect him
pro tip: firefox has a developer edition with more tools! :D
Selecting an element in the elements panel and using the different "Break On" options can also be very helpful on figuring out how some things work!
"If i'm illegally scraping a website"
lmao
Scraping is seriously underrated. I've built a lot of websites based on other peoples data
@@TheCameltotem because of you laws like this exist to protect people from you
@@joopie46614 Its legal unless you abuse it ie bring down their site.
The music and the video audio go so well.
In the network filter, you can filter by request method by using -method:GET -method:OPTIONS -method:PUT. Easy way to find areas in a complex webapp where data is submitted without knowing what the routes actually are.
I like a lot how, after a few videos and deep diving into fireship's world, you simply start callim him Jeff, like you would call a friend that you know for a time now, thanks Jeff, you are awesome!
I had an issue that I wouldn't have noticed if it wasn't for this video. Thanks Jeff!
Pro Tip:
1.Add crome extension to dev tools bar: Vue Telescope, Vue.js devtools -> for vue; GraphQL Network, Clockwork for laravel, Save All Resources to download entire website.
2. Brave browser can block request coming from google analytics, which help while developing live site and testing website integrated with analytics. (for one who test website more than 100 times and google analytics track that request, you can also block ip but using brave is my choice).
Not sure how specific this is to the developer tooling in the browsers themselves, but the Quick Source Viewer extension and JSON Viewer in Chrome format raw source outputs as well as API responses which can be super handy!
To make source files changes persist through page refresh, use local overrides. It helped me a lot when I was dealing with an external (other team's) module connected to mine with a web socket. I needed to force some state and modify some function definitions in order to test my module's changes and see how they behaved over the socket. It was really helpful to make changes to their module on my own, instead of bothering the other team and asking them to deploy on the testing environments, just so I can experiment with my solutions. Really good stuff!
It becomes really slow when reload the page swithing to local overrides. Dnt know why
I thought I knew the developer tool thoroughly, but you always manage to teach me something new ❤️
Never once have you wasted my time ❤️ thank you Jeff
I am so glad to have good senior developers in my team that I learned most of these things from. The other tips they probably don't even know lol
Gosh, I've seen so many new awesome feature here, I feel motivated to work with web (again)
The example you used in the very beginning, directly exposing those scammers made me lol😂😂
I learnt a lot just like from any other of your videos. Here are my tips: if you make a bookmark with the url starting with 'javascript:', the rest of the url will be executed(google doesn't allow it, so test it on another page), also webflow offers an incredibly handful html/css editor - you basicaly make the website without writing tedious html and css code
That Design mode feature is so sickk!! Never knew about that one
When he started talking about Brave in the end I almost screamed! I've been using it for a little more than a year and can NEVER switch back to chrome!
My mind is blown!! Thank you for making this super detailed video!! Awesome job!!
My god, actually insanely useful and impressive - thank you so much! ❤
make a desktop icon for your favorite website by click and hold on the lock that by the URL and drag it to desktop
CMD + option (alt) + J to open *console* on MAC
Also:
CTRL + SHIFT + C (Windows & Linux)
CMD + SHIFT + C (Mac)
Opens up inspector with inspect element.
Pressing ESC while inspect mode is active, will toggle the *console*
While inspector is active, the combination of *CMD/CTRL + SHIFT + M* will toggle mobile mode
If you forgot the password on some website but chrome fullfill the input, you can quick preview the value. Just use the "inspect element" function with Ctrl+Shift+C and click on password input element. Then type "$0.value" into DevTools's console and voilà!
Alternative, instead of the "inspect" function, you can right click on password input and click the last option - "inspect".
Hit Ctrl + Shift + c (Command instead of Ctrl if you are on mac) and hover over element you want to inspect. It highlights the HTML of the element that your cursor is at (and it’s applied styles of course). Works even if dev tools is not open.
I moved from Brave to Opera GX. It is pretty interesting. Give it a try. Some issues with extensions but they are actively working on improving the experience
ctrl + shift + c is the quickest way to select an element on the page and see it's html and css, can't live without that shortcut :D
What a video! So much information in 9 minutes!
You can also use the developer tools to inspect websites on connected Android devices with USB debugging enabled or Node.js programs. In Chrome, it’s located at chrome://inspect.
The only channel that I need to watch at 0.75x speed, unlike my regular flow of 1.25x :)
I am putting this one into bookmarks. Awesome video
I look forward to every video and it doesn't disappoint me at all. Thank you.
In Firefox you can take a screen shot of the while page or an element from the right click menu. Super useful for pull request descriptions!
Pro tip: If you have an event listener for hover you can add a debugger line in any of the lines of the code while debugging after firing the event and the hover event will frozen so you can style it on the fly.
Pro Tip: On the Network Tab you can resend your POST request using "Replay XHR". Convenient that you don't need to resubmit your form manually if you are debugging your backend code
This video is pure gold
Tip: Sometimes you are entering password and the toggle button isn't there to view what you've entered
You may inspect that element and change the input password to input text
How have I lived this long without knowing about design mode? I've been manually editing HTML tags if I want to mess around with a site but damn, that's much easier.
These days browsers are more complex then a whole operating system
It's actually already being used as an operating system (i.e. Chromebooks) or you can load an OS in your browser
OMG!! Who would have thought that a simple chromium browser would be SUCH AN ADVANCED POWERFUL TOOL!
After watching this video I would never be able to blame Chromium for anything..
You can edit CSS classes that apply to your elements by going to the style window and just clicking on the properties
Thank you very much, now I can understand the magic of website builders.
If you're an animator you may be familiar with the after-effects graph editor or "curve editor". Well, Chrome has one built-in. If you define an animation-timing-function in CSS you can use devtools to modify the curve and tune the exact animation effect you want.
Tip: You can also use browser to check the call stack of javascript functions
Would be nice to see a video on tracing, identifying, and fixing a memory leak on a sample angular application.
Angular recently released a new browser extension, I'll cover it eventually.
@@Fireship awesome, thanks for the work you put in Jeff, it never goes unnoticed, you're an inspiration, a hero, a role model.
Stay safe bud.