The Bootstrap 4 theme files are in the description if you want them to follow along. Don't forget to check out the Udemy course if you are interested in creating it from scratch :) Enjoy the video guys
Please look into making Bootstrap 4 + Wordpress Theme Development. I will happily pay for that course and I am sure most of your subscribers would too. Thank you for the brilliant videos.
Brad I've been diddling with Web design for years, read a couple of large books, spent hours on w3c site. Seems like the tools to help have fun at my level are appearing thanks to the talent an work of many. Now I found Traversy also to even make it better. I am a 68 year old non service connected disabled Veteran and Brad I can't tell you how your material helps keep me busy. Thanks.
Kudos Tom. I normally win the "oldest person in the room" contest - but you are some two years ahead of me. I am fortunate to have a son in his early thirties who works in Tech, so I can always ask him for help.
When you increment pixels in dev tools with up and down arrow you can also hold down Shift to increment by 10 pixels or you can hold ctrl to increment by 0.1 pixels. That is worth keeping in mind :)
Most persons use Dev Tools to rip css styles. The entire video gives you tips on how to find styles but the focus on the css menuse starts at: 11:14 - for your convenience. More tutorials should include a list of anchor links in the description. Spread the news on other channel comments.
Thank you so much, you have explained that bootstrap class "navbar-light" does not mean LIGHT COLOR, this misleading use of 'navbar-light' by bootstrap guys was driving me nuts, how to make the navbar background dark but the text white, and when ever I use navbar-light, the text can't be seen on a background navbar, so thank you so much, you are the man.
wow, i usually only use the inspector and the console. thanks for the tips. you talk in the end about accessibility and ARIA properties, i would love to see a video about best practices for them. most coding tutorials usually skip accessibility.
Another awesome and informative video Brad! I just started learning about web development about a month ago and can't thank you enough for these in-depth crash courses on so many different topics!
Part 3 - 17:00 (Console) 1) alert(1) - JS code - Pops up on the screen 2) $_ -> Shows the last returned value 3) Top left button to clear console 4) $0, $1 -> Last selected html ( Devtools Sandbox Files console.log() - testing
Awesome !!!!! Very helpful. thanks a lot. just two points . Seems like some upgrade has happened in chrome. The Audit tab is now replaced with Lighthouse. And also in the source tab overrides is the option to add code in workspace and edit it through the dev tool. The process is same as shown in the video, just the option has changed . so instead of "add workspace" it is now overrides -> add workspace and so on.
Outline of Video: Google Chrome Developer Tools: These notes are from this video: ruclips.net/video/x4q86IjJFag/видео.html Mailtag makes a chrome email attachment. We’re working with the Mizuxe theme which is a SPA bootstrame theme from the udemy course. The menu items on this single page appliation just take us to that part of the team. F12 to open dev tools or right click “inspect”. Click on the three dots and select “more tools” to get even more tools. We can move the google dev tools around by clicking the “dock” button. We can also completely separate it from the website window and put it in its own window, as I have done. We can use the phone button to look at the site on different screen types. Click on the “arrow in the box” in dev tools to hover over the website and have it highlight the code that represents that piece. Mt-t, pt-t display2, names that sound like that are bootstrap names. The STYLES tab displays any css that is connected to that chunk that we have selected in the elements window. To the right of the css it even says the file name and the linenumber where that CSS is derived from. We can click on the filename and it will open for us. There are checkboxes next to the css properties, we can uncheck or check them to remove that class. If we toggle a class on or off, it toggles it on or off to everything that uses it. If we want to toggle it on or off for only one specific element then we would lcick “.cls” and use the checkbox there. We can change text and other things directly in the elements window. It is obviously temporary, if we reload the page then it will obviously go away. There is indeed a way to save our changes (localy) and thus use google chrome tools as an actual text editor. Within the elements window we can: Change text. We can double click on the classes to add a class. We can double click to add an id. We can change pretty much anything just by double clicking on it. We can right click on something and select “hide” in which case it is invisible but it still takes up the space, or we can select “delete” which completely removes it from the DOM. We can right click and copy and paste elements from different areas to other areas. We can right click on things to put them in different states, like “hover”. It will display an orange bubble to denote. Active, focus, visited, there are many different states that we can select. Expand all, collapse all. Bootstrap4 has a class called “navbar-light” which darkens the text so that it shows up better against a light background navbar. We can select an element then click on the .cls button in the css window and toggle things on or off, or we can add new classes. As we start to type, it has an intellisense that will pop up any classes in connected style files. It searches the classes and looks for ones that match what you hae typed so far. If we click on the color box in the css window it brings up a color picker and we can select a new color. We can click on things in the CSS window and click up or down to increment or decrement numbers. If we have a bunch of properties on an element that we like, we can select the Plus sign next to the .cls and it will package all of those css properties into a new class for us, or something like that. If an element has multiple display states, like hover, acctive, focus, visited, etc, we can select that checkbox at the top of the CSS window and the CSS switches to what it’s values are for that state (like hover, focus, active, etc) The “Filter” in the CSS window is like a search function. CONSOLE: In the console tab, we can right javascript and it will run it for us. “Undefined” just means that there is no return value. We can write numbers, or math, or anything javascript really. $_ will give the last returned value. $0 will give us the last element inspected with the inspector. $1 will give us the second to last $2 the third to last... The “not allowed” sign will clear the console of code. We can also use the money sign in a similar way to jquery even though it’s not jquery. We can also the the money sign for “document.queryselector()” like in jquery Anything we write in the console, in JS, acts like it is connected to the file, and when we hit enter, it runs, so anything we can do with JS we can do by typing it there. We can write “console.log()” console.log(‘hello’); In this situation, the developer has visual studio open on the left, vertically, and then a browser window on the right, with the page display on top and the console.log on the bottom. The console gives us JS errors and we can click on it and it will show us the file and the line and everything. We can throw our own errors with console.error(‘This is an error’); Warnings with console.warn(‘This is a warning’); console.dir(); will show us a javascript representation of the DOM document. We can write all kinds of javascript in the console or in the html inside a script tag, like for example console.log(document.URL); We can make tables, with console.table([{name: ‘john’, email: ‘test@test.com’, age: 33 }]) It will actually create and display a table in the console. Click the little triangle on the top right of the console window and we can turn the display of different things on and off, like info, warnings, etc. console.clear() obviously clears the console window. Ctrl forward slash will comment a block of code out. console.group(‘Say Hello’) console(‘Hello sean’); console.log(‘Hello Richard’); console.groupEnd(‘Say Hello’); The above will put the two middle pieces “underneath” the Say Hello, in that we can clickon the little icon and expand or collapes the things underneath/inside. console.time(‘name’); The stuff in the middle will get timed, it will display the name and the time. console.time(‘name’); We can do assertions, which are tests. Skip to 29 mins in for more details on assertions. console.assert(x>y, {“message”: “x is not greater than y”, “x”:x, “y”:y }); There are some settings available with the cosole, like to attach timestamps to logs, display ajax requests. SOURCES: We can create snippets then right click and save them and run them. We can use the sources window like a text editor. If we simply click on the “top” then the ip number then the index.html, we can see it and make changes, but we cannot save our changes. In order to save our changes we must right click in the sources tree area, select workspace and add-folder to workspace. He usually puts the new html file in the folder that the old HTML file is in, so that all the file name paths still align. With file paths that go to the harddrive, we can use the sources tab like an entire little editor. At this point, both the sources window and visualstudiocode are both just editing the same file on the hard drive. Network TAB: This shows us all the files that are loading in relation to this website. The “WS” is for websocket, which refers to the liveserver if you are using visualcode with the liveserver plugin. At 35:30 he adds an ajax request connected to an event listener, the ajax request connects to github and gets a list of users. The ajax api he uses he pastes from elsewhere. It’s entirely on the screen if you want to read it. After incorporating the ajax request, if we look in the network window, it shows the ajax request, and we can look all through the info that it gave/received. XMLHttpRequest(); is the part of the browser that makes asynchronous calls, that is what XHR stands for in the network window. Application Tab: This allows us to see what is stored inside the browser. There is “local storage” “session storage”, cookies, databses, etc. 42 mins in is about when I stopped watching
Touch and hold a clip to pin it. Unpinned clips will be deleted after 1 hour.Touch and hold a clip to pin it. Unpinned clips will be deleted after 1 hour.
Useful. May I suggest console.log([lineno,whatever]) as a practice to provide a useful trace facility. Would be nice to not have to type the line number.
Incrementing hex values works also on arrow up/down. #FFF is the highest, of course ;) It's not useful because of treating as a whole number, not as three channels. Thank you for the course!
Thank you. Looking for a good tutorial on this and this seem so legit. A bit old but hopefully not much changed. The website to work on looks the same. Great work sir. Most grateful for your contribution. God Blesses!
Nice as always Brad! Knew all functions already but the video's are just fun to watch and despite the fact I already knew them I just keep learning from this things.
Thank you for this tutorial. You mentioned around 8:00 that you can add your local workspace to chrome for keeping edits. Do you have a video on this? I think this would be really useful for learning
He ends up doing in Sources, after 30:00 or so. I needed to be in the Filesystems tab, not Pages etc, to right-click access. Maybe you have answers already. He looked to prefer the code editor still with Live Server, or alt Five Server. I've gotten most curious about how most effectively, swiftly apply the Network and other data tabs that follow.
THANK YOU! I'm a newb but especially found the info on the Sources tab to be most helpful to me. Still a bit clunky at it but I'm learning. One thing I noticed, and would love your response to is how to keep the src and href refrences from getting messed up in the saving process?
Can you please make tutorial on Angular 2 token based login functionality and teach us how token base authentication work from backend to frontend. It would be great. Thanks for such simple tutorials.
Hi I love your video but where is the one of you showing how to add your local workspace to developer tools so the changes you make actually will be saved on only your computer?
Your tutorials are great, but I have no idea what you mean by saying the files are in the description. What desciption? Sorry if I am missing something obvious.
Please look into making Bootstrap 4 + Wordpress Theme Development. I will happily pay for that course and I am sure most of your subscribers would too. Thank you for the brilliant videos.
I must be missing something. At about 17:02 the URL goes from a file to a local server (127.0.0.1:5500). What is this server? I couldn't find any mention of this change? If it is, when? I ask because when I edit sources on a loaded workspace with the file:/// ref the changes are NOT reflected in the main browser window without a full F5 reload of the page on Windows 10 and Chrome 85. When I search on the web I can't find any mention of this auto update either. Has this changed from Chrome or am I holding it wrong?
Is there any option to execute Chrome to run a given Java-function and return that result (into a file or stdout)? I need this in a PS-script at the end.
any idea why visual studio code cannot launch debugging in chrome? chrome page does open localhost:8080 but it is empty. I already checked and proxy is not enabled. Any other ideas please?
How do I get the real time screen, that shows my webpage , to display in an adjacent panel ? I'm just getting this youtube video on my left and on my right is my new folder with code that I am trying to edit, display results and save. I don't see my own webpage displayed anywhere. Thanks.
thank you, I just started to learn this, and I see tabs that are not in my dev tools, in your video, I don't see timeline and in my dev tools I don't see audits
how to change the size of developer tool. I don't know what I have done, but when I click on "Toggle toolbars". It shows with a big screen. I am not sure where can I change the size to the default.
Many Thanks, Brad.
Top quality as always.
elements tab: 04:20
console tab: 17:00
sources tab: 30:02
network tab: 33:30
application tab: 40:52
audit tab: 45:45
Thank you so much.
Thanks for the list
mvp
Thanks.. but i noticed that the "Resources" tab is not shown here... is there a way to Show/Hide this tab?
Thanks Sam, this help much as well.
The Bootstrap 4 theme files are in the description if you want them to follow along. Don't forget to check out the Udemy course if you are interested in creating it from scratch :) Enjoy the video guys
Traversy Media thanks for your videos. Can u make crush course about owl carousel? Thanks again
Please look into making Bootstrap 4 + Wordpress Theme Development. I will happily pay for that course and I am sure most of your subscribers would too. Thank you for the brilliant videos.
please make a sequelize crash course tutorial
Brad I've been diddling with Web design for years, read a couple of large books, spent hours on w3c site. Seems like the tools to help have fun at my level are appearing thanks to the talent an work of many. Now I found Traversy also to even make it better.
I am a 68 year old non service connected disabled Veteran and Brad I can't tell you how your material helps keep me busy.
Thanks.
How do you space rows when editing text trying that right now
Hey Tom great work. What you are doing is really inspirational. Would love to connect with you some day
@@angrynerd4178 probably too late but it's shift + enter
Kudos Tom. I normally win the "oldest person in the room" contest - but you are some two years ahead of me. I am fortunate to have a son in his early thirties who works in Tech, so I can always ask him for help.
I'm a total coding noob and this has really opened my eyes to the possibilities with nothing but the browser. Thanks.
This video is for the ones that "applied to a position I don't know nothing about but I got hired anyways" You're the best!
.
Am learning WordPress but a number of lessons show 'inspector'. I learnt so much from this video. Thank you.
When you increment pixels in dev tools with up and down arrow you can also hold down Shift to increment by 10 pixels or you can hold ctrl to increment by 0.1 pixels. That is worth keeping in mind :)
Ctrl+shift+arrow for 100
I just can't believe it. Now I completely understand what "just in time" means. Thanks A LOT
Most persons use Dev Tools to rip css styles. The entire video gives you tips on how to find styles but the focus on the css menuse starts at: 11:14 - for your convenience. More tutorials should include a list of anchor links in the description. Spread the news on other channel comments.
Thank you so much, you have explained that bootstrap class "navbar-light" does not mean LIGHT COLOR, this misleading use of 'navbar-light' by bootstrap guys was driving me nuts, how to make the navbar background dark but the text white, and when ever I use navbar-light, the text can't be seen on a background navbar, so thank you so much, you are the man.
Hey man - I just wanted to let you know that you do a great job of explaining things and whatever mic you use is dope!
Clicking up/down will increment/decrement the hex color value. You were just on #FFF which is the max. ;)
Gosh, you're awesome! What I've learned just 5 minutes in! Even a child would understand you easily. Staying glued to this channel right here.
wow, i usually only use the inspector and the console. thanks for the tips.
you talk in the end about accessibility and ARIA properties, i would love to see a video about best practices for them.
most coding tutorials usually skip accessibility.
Another awesome and informative video Brad! I just started learning about web development about a month ago and can't thank you enough for these in-depth crash courses on so many different topics!
Firefox got some really neat tools too, you should have a look at nightly or beta
Agreed!!!
its ugly boxy unintuitive UI though
Part 3 - 17:00 (Console)
1) alert(1) - JS code - Pops up on the screen
2) $_ -> Shows the last returned value
3) Top left button to clear console
4) $0, $1 -> Last selected html ( Devtools Sandbox
Files
console.log() - testing
Awesome !!!!! Very helpful. thanks a lot. just two points . Seems like some upgrade has happened in chrome. The Audit tab is now replaced with Lighthouse. And also in the source tab overrides is the option to add code in workspace and edit it through the dev tool. The process is same as shown in the video, just the option has changed . so instead of "add workspace" it is now overrides -> add workspace and so on.
Outline of Video:
Google Chrome Developer Tools:
These notes are from this video: ruclips.net/video/x4q86IjJFag/видео.html
Mailtag makes a chrome email attachment.
We’re working with the Mizuxe theme which is a SPA bootstrame theme from the udemy course.
The menu items on this single page appliation just take us to that part of the team.
F12 to open dev tools or right click “inspect”.
Click on the three dots and select “more tools” to get even more tools.
We can move the google dev tools around by clicking the “dock” button.
We can also completely separate it from the website window and put it in its own window, as I have done.
We can use the phone button to look at the site on different screen types.
Click on the “arrow in the box” in dev tools to hover over the website and have it highlight the code that represents that piece.
Mt-t, pt-t display2, names that sound like that are bootstrap names.
The STYLES tab displays any css that is connected to that chunk that we have selected in the elements window.
To the right of the css it even says the file name and the linenumber where that CSS is derived from. We can click on the filename and it will open for us.
There are checkboxes next to the css properties, we can uncheck or check them to remove that class.
If we toggle a class on or off, it toggles it on or off to everything that uses it. If we want to toggle it on or off for only one specific element then we would lcick “.cls” and use the checkbox there.
We can change text and other things directly in the elements window. It is obviously temporary, if we reload the page then it will obviously go away.
There is indeed a way to save our changes (localy) and thus use google chrome tools as an actual text editor.
Within the elements window we can:
Change text.
We can double click on the classes to add a class.
We can double click to add an id.
We can change pretty much anything just by double clicking on it.
We can right click on something and select “hide” in which case it is invisible but it still takes up the space, or we can select “delete” which completely removes it from the DOM.
We can right click and copy and paste elements from different areas to other areas.
We can right click on things to put them in different states, like “hover”. It will display an orange bubble to denote. Active, focus, visited, there are many different states that we can select.
Expand all, collapse all.
Bootstrap4 has a class called “navbar-light” which darkens the text so that it shows up better against a light background navbar.
We can select an element then click on the .cls button in the css window and toggle things on or off, or we can add new classes.
As we start to type, it has an intellisense that will pop up any classes in connected style files. It searches the classes and looks for ones that match what you hae typed so far.
If we click on the color box in the css window it brings up a color picker and we can select a new color.
We can click on things in the CSS window and click up or down to increment or decrement numbers.
If we have a bunch of properties on an element that we like, we can select the Plus sign next to the .cls and it will package all of those css properties into a new class for us, or something like that.
If an element has multiple display states, like hover, acctive, focus, visited, etc, we can select that checkbox at the top of the CSS window and the CSS switches to what it’s values are for that state (like hover, focus, active, etc)
The “Filter” in the CSS window is like a search function.
CONSOLE:
In the console tab, we can right javascript and it will run it for us.
“Undefined” just means that there is no return value.
We can write numbers, or math, or anything javascript really.
$_ will give the last returned value.
$0 will give us the last element inspected with the inspector.
$1 will give us the second to last
$2 the third to last...
The “not allowed” sign will clear the console of code.
We can also use the money sign in a similar way to jquery even though it’s not jquery.
We can also the the money sign for “document.queryselector()” like in jquery
Anything we write in the console, in JS, acts like it is connected to the file, and when we hit enter, it runs, so anything we can do with JS we can do by typing it there.
We can write “console.log()”
console.log(‘hello’);
In this situation, the developer has visual studio open on the left, vertically, and then a browser window on the right, with the page display on top and the console.log on the bottom.
The console gives us JS errors and we can click on it and it will show us the file and the line and everything.
We can throw our own errors with console.error(‘This is an error’);
Warnings with console.warn(‘This is a warning’);
console.dir(); will show us a javascript representation of the DOM document.
We can write all kinds of javascript in the console or in the html inside a script tag, like for example console.log(document.URL);
We can make tables, with console.table([{name: ‘john’, email: ‘test@test.com’, age: 33 }])
It will actually create and display a table in the console.
Click the little triangle on the top right of the console window and we can turn the display of different things on and off, like info, warnings, etc.
console.clear() obviously clears the console window.
Ctrl forward slash will comment a block of code out.
console.group(‘Say Hello’)
console(‘Hello sean’);
console.log(‘Hello Richard’);
console.groupEnd(‘Say Hello’);
The above will put the two middle pieces “underneath” the Say Hello, in that we can clickon the little icon and expand or collapes the things underneath/inside.
console.time(‘name’);
The stuff in the middle will get timed, it will display the name and the time.
console.time(‘name’);
We can do assertions, which are tests.
Skip to 29 mins in for more details on assertions.
console.assert(x>y, {“message”: “x is not greater than y”, “x”:x, “y”:y });
There are some settings available with the cosole, like to attach timestamps to logs, display ajax requests.
SOURCES:
We can create snippets then right click and save them and run them.
We can use the sources window like a text editor.
If we simply click on the “top” then the ip number then the index.html, we can see it and make changes, but we cannot save our changes.
In order to save our changes we must right click in the sources tree area, select workspace and add-folder to workspace.
He usually puts the new html file in the folder that the old HTML file is in, so that all the file name paths still align.
With file paths that go to the harddrive, we can use the sources tab like an entire little editor.
At this point, both the sources window and visualstudiocode are both just editing the same file on the hard drive.
Network TAB:
This shows us all the files that are loading in relation to this website.
The “WS” is for websocket, which refers to the liveserver if you are using visualcode with the liveserver plugin.
At 35:30 he adds an ajax request connected to an event listener, the ajax request connects to github and gets a list of users.
The ajax api he uses he pastes from elsewhere. It’s entirely on the screen if you want to read it.
After incorporating the ajax request, if we look in the network window, it shows the ajax request, and we can look all through the info that it gave/received.
XMLHttpRequest(); is the part of the browser that makes asynchronous calls, that is what XHR stands for in the network window.
Application Tab:
This allows us to see what is stored inside the browser.
There is “local storage” “session storage”, cookies, databses, etc.
42 mins in is about when I stopped watching
This came a few days after I suggested exactly this tutorial. Wow! Totally made my day, thanks.
20 more hours I need to get it done soon
Touch and hold a clip to pin it. Unpinned clips will be deleted after 1 hour.Touch and hold a clip to pin it. Unpinned clips will be deleted after 1 hour.
Useful. May I suggest console.log([lineno,whatever]) as a practice to provide a useful trace facility. Would be nice to not have to type the line number.
Really helpful, the only other thing I would have added is showing how to set breakpoints in the sources
I will be able to help my Uncle with his website thanks to you man!
way more helpful than odin project on dev tools. thanks
Great demonstration video, dear Brad, keep it up
Incrementing hex values works also on arrow up/down. #FFF is the highest, of course ;)
It's not useful because of treating as a whole number, not as three channels.
Thank you for the course!
Thank you. Looking for a good tutorial on this and this seem so legit. A bit old but hopefully not much changed. The website to work on looks the same. Great work sir. Most grateful for your contribution. God Blesses!
Great as always Brad ... thank you! ...
Man-on-the-Run thank you
You are legend...no words for you...thanks a lot to clear my doubts
Great illustrations...Really enjoyed this lesson
Thank you, sir, once again. It helps me a lot and so many other people to have your videos here to save our coding lives haha. Keep it up
when i learn something new i'll see every time your videos
you are great TM
This was a great video. Brad is a great teacher. I'm glad I found it. I'm going to look for more of his videos.
Nice as always Brad! Knew all functions already but the video's are just fun to watch and despite the fact I already knew them I just keep learning from this things.
you sound like a first class idoit
Really good. I learned a lot about the dev tools, especially the console.
thanks Brad. Anyway you can do the step in. step over? that would be very very helpful.
Thank you for this tutorial. You mentioned around 8:00 that you can add your local workspace to chrome for keeping edits. Do you have a video on this? I think this would be really useful for learning
He ends up doing in Sources, after 30:00 or so. I needed to be in the Filesystems tab, not Pages etc, to right-click access. Maybe you have answers already. He looked to prefer the code editor still with Live Server, or alt Five Server. I've gotten most curious about how most effectively, swiftly apply the Network and other data tabs that follow.
Good work. Nice intro to Chrome Dev Tools
You also missed the throttling feature (Options drop down) on the Network tab where you can change your network speed.
Ripe for an updates @TraversyMedia? Would you be open also to covering Firefox Tools or they aren't as important?
Hi Brad, can I expect series on designing email?
Argh, I just can't get enough of your stuff!
Great video Brad, i find your videos are the best on web development topic. Keep it up. I just hit the subscribe button.
Nice, quick intro. Great job
THANK YOU! I'm a newb but especially found the info on the Sources tab to be most helpful to me. Still a bit clunky at it but I'm learning. One thing I noticed, and would love your response to is how to keep the src and href refrences from getting messed up in the saving process?
Nice Tutorial. Before I was using this tool but, I wasn't aware that it has this much features. Great keep it up!!
Thank you Brad, super clear and organized course.
hey Brad can u please make a full video of making fully functional online shopping store website and a hotel booking website? it will really help...
Can you please make tutorial on Angular 2 token based login functionality and teach us how token base authentication work from backend to frontend. It would be great. Thanks for such simple tutorials.
Ankush Kalia have you watched mean stack front to back on my channel?
Hi I love your video but where is the one of you showing how to add your local workspace to developer tools so the changes you make actually will be saved on only your computer?
You are GOD. It is always a delight to watch your videos.
Maybe you could do some video's on PostCSS / SCSS or something like Vue and API's with more settings like Facebook, Twitter etc.
Your tutorials are great, but I have no idea what you mean by saying the files are in the description. What desciption? Sorry if I am missing something obvious.
Please look into making Bootstrap 4 + Wordpress Theme Development. I will happily pay for that course and I am sure most of your subscribers would too. Thank you for the brilliant videos.
this is great video man, loved it
How come I see classes in the markup, but they aren't listed in the styles list of the inspector?
I'm sorry I haven't seen your complete video. Is it explaining how to save changes made after editing page??
Excellent video. Great content. I learned a ton. I'm glad I found this.
Very much appreciated - crystal clear and concise, as always!
Awesome I was expecting for this from a long time from you Brad love you ...getting ready to watch it
Please do a React - Redux in depth series
Rahul Anantharama he is doing a udemy react course
Great job! Great video. Love your pace and tone. Thank you!!
Cheers
Bruce B.
I must be missing something. At about 17:02 the URL goes from a file to a local server (127.0.0.1:5500). What is this server? I couldn't find any mention of this change? If it is, when? I ask because when I edit sources on a loaded workspace with the file:/// ref the changes are NOT reflected in the main browser window without a full F5 reload of the page on Windows 10 and Chrome 85. When I search on the web I can't find any mention of this auto update either. Has this changed from Chrome or am I holding it wrong?
Great tutorial... Thanks Brad!...
Can you do a similar tutorial with Firefox DevTools?...
Thanks I'm going to use this to change my online grades.
Treasuring the dev tools with chrome
Session was just awesome
Many thanks BRAD
feel like subscribing twice
Thanks man for this tutorial hello from 2021
Great video, thanks! Btw., "clink that link" made me laugh at 51:15 😁
Your contents are great! Love your videos.
Amazing bro. could you make a tutorial on how to overwrite bootstrap? please. it gives me a hard time when I use a library and I want to add something
Top quality and so useful for beginners! More videos, please :)
Brad's Boston accent is killing me.
Is there any option to execute Chrome to run a given Java-function and return that result (into a file or stdout)? I need this in a PS-script at the end.
any idea why visual studio code cannot launch debugging in chrome? chrome page does open localhost:8080 but it is empty. I already checked and proxy is not enabled. Any other ideas please?
How do I get the real time screen, that shows my webpage , to display in an adjacent panel ? I'm just getting this youtube video on my left and on my right is my new folder with code that I am trying to edit, display results and save. I don't see my own webpage displayed anywhere. Thanks.
Thanks Brad, insightful content!
thank you, I just started to learn this, and I see tabs that are not in my dev tools, in your video, I don't see timeline and in my dev tools I don't see audits
This is the best video ever
Das ist das geilste Video ever
Это лучшее видео на свете
Kindly made a tutorial on rubber duck debugging please .
thank you so much, How to align the website from left to right?
re console.assert - how is the 2nd param json...if it was json, it would be a string...so why the quotes around 'message' et al?
Hey Brad, any good videos on fixing Lighthouse issues?
sometimes, for example, I want to add "letter-spacing" but do not let me I wanna learn how to know which element interact with the new add.
how to change the size of developer tool. I don't know what I have done, but when I click on "Toggle toolbars". It shows with a big screen. I am not sure where can I change the size to the default.
Very helpful and easy to understand, thank you Brad
Superb video as always, well done!
Thank you!
Thanx a lot, but what about Perfomance tab?
I already knew this but love the video
What tool did you use to record your screen for this video?
Hey hi brad, please make a video on ng-bootstrap
Allah bless you. I have to paid lot of bucks for learning this stuffs. But I get it from you completely free.
Please make series on laravel for beginners?
Am I the only one who doesn't have the audit tab ? how did you get this tab ?
Really Great videos I'm really lucky to found your channel Thank you Brad 😍😍😍😍
Happy to learn from you. Well done. Good work.
How do you space rows when editing text trying that right now
good video and nice overview of chrome dev tools
Thanks Brad , Simple and informative.
MailTag is so awesome.
Twelve O'Seven yes it is
Doesn't work for me - and lots of reviews reporting phishing/scam. Thoughts?