Google Chrome Developer Tools: 12 Tricks to Develop Quicker




About this tutorial:

Video duration: 4:37
In this video, Paul Irish, a Chrome developer advocate, presents 12 tips and tricks on how to use Chrome’s developer tools. To learn more visit code.google.com/chrome/devtools

Post Author: OfficeTutes.com

Apple lover, ICT and LEAN consultant, MS Office lecturer My other website with video tutorials - Tutorials, guides and news for iPhones and iPads

46 thoughts on “Google Chrome Developer Tools: 12 Tricks to Develop Quicker

    Jax Alvares

    (January 26, 2019 - 11:44 am)

    How can I find a deleted comment on an online news site? any suggestions. TIA

    Shareef Hiasat

    (January 26, 2019 - 11:44 am)

    its very old , but still learned something

    Rich Williams

    (January 26, 2019 - 11:44 am)

    can you right click on an element and then find the css related to it ?

    Steffen W.

    (January 26, 2019 - 11:44 am)

    I have a question. I have this site where there are collapsed comments. In the html-code it says

    <a href="javascript:void(0);" class="collapsed-comment"><span>View 18 replies</span> <!—-></a>

    What I want the console (or a script) to do now is trigger everyone of these links to expand all comments at once.

    Why I want to do this? I want to search the comments for keywords without much effort and I know, if I knew more html or javascript, there wouldn't be this problem.

    So if anyone firm in the subject could offer me his/her help, I would be glad. Thank you.

    frms xgq

    (January 26, 2019 - 11:44 am)

    out of time!

    Sawyer Merchant

    (January 26, 2019 - 11:44 am)

    Just after 3:00, Paul uses the "Scripts" tab which is now called the "Sources" tab.
    Very helpful video, thanks.

    chester cheetah

    (January 26, 2019 - 11:44 am)

    How can we control developer tools through Python Script? Suppose I am using some Webdriver like Selenium to open Chrome instance then how can I control developer tools through code?

    Thomas Burdon

    (January 26, 2019 - 11:44 am)

    Ziad Seyfou

    (January 26, 2019 - 11:44 am)

    i ve been seeing many errors on my console screen . i JUST wanna know how to clear it
    (: thank you in advance

    Visual Hiker

    (January 26, 2019 - 11:44 am)

    Outdated video

    Yiannis Dermitzakis

    (January 26, 2019 - 11:44 am)

    Chrome's DevTools have moved here: https://developer.chrome.com/home/devtools-pillar

    Pharmokan z

    (January 26, 2019 - 11:44 am)

    <3 paul irish

    Coolpool79

    (January 26, 2019 - 11:44 am)

    3:19
    This doesn't work for me. It won't let me click on the code and edit it.

    Suhas Koli

    (January 26, 2019 - 11:44 am)

    good

    Jonathan Dran

    (January 26, 2019 - 11:44 am)

    Come on +Paul Irish and Google guys, show some respect to deaf / hard of hearing people and stop speak too fast! Or at least provide a slow down button as provided in many other places.
    It's difficult to follow both captions and screen demonstrations at a fast pace you know..

    Google shouldn't just be a leader, but act as one too.

    Kimberly Hargis

    (January 26, 2019 - 11:44 am)

    Question: I want to make a few small html tweaks using inspector such as <h2> to an <h3> and I need to know how to save those change after I made them. When I go to resources all I can find is php codes. I need to figure out how to find where the actually html line was written to make the changes.  Any thoughts?  

    ClassyFX

    (January 26, 2019 - 11:44 am)

    how do you use this on cartown on facebook

    Eddi Hughes

    (January 26, 2019 - 11:44 am)

    WITCH CRAFT

    Sid Ghodke

    (January 26, 2019 - 11:44 am)

    2:05 — that was pretty cool!

    Elijah Lynn

    (January 26, 2019 - 11:44 am)

    Keep at it Bobby, if you learn just 1% more every day that is quite a bit of compounded interest over the course of a year! If you can get really good at one area of web development you have the opportunity to enter a very niche market that is currently starved of great talent.

    Noah Avenell

    (January 26, 2019 - 11:44 am)

    Well by all means don't elaborate.

    Thin Soldier

    (January 26, 2019 - 11:44 am)

    I'm a dimwit and I've been doing this stuff for 6 years. The basics are very easy if you don't start off with old and outdated information. From there it's just making time to use it until you understand it. Then take baby steps into the areas you don't understand. It helps to have an actual need that can only be met by learning something new.

    Jali Records

    (January 26, 2019 - 11:44 am)

    lol im starting to study this and its so cool but its to hard

    Self Stirring Pot

    (January 26, 2019 - 11:44 am)

    You copy and paste it into notepad or into where ever. There are plugins out there as well that may let you save it.

    Blaming Buddha

    (January 26, 2019 - 11:44 am)

    Im trying to learn this stuff. Im starting to, a little bit. Start by learning some basic HTML language guys.

    Juan Alberto Tirado

    (January 26, 2019 - 11:44 am)

    I'd really like to learn to use this stuff, but it's kind of complicated.

    Nothing

    (January 26, 2019 - 11:44 am)

    how do u save

    michalstanko

    (January 26, 2019 - 11:44 am)

    Wow, Paul has pulled a serious face here 😛

    Oleg Taran

    (January 26, 2019 - 11:44 am)

    well, why do you watch such videos if you are not web-developers in the first place

    Dan Cooper

    (January 26, 2019 - 11:44 am)

    I DONT KNOW WHAT ANY OF THIS MEANS

    labobo

    (January 26, 2019 - 11:44 am)

    too bad dev tools are so buggy and useless when it comes to performance test, memory leak tracking / optimization

    Miroslav Trninić

    (January 26, 2019 - 11:44 am)

    Chrome dev tool is really great and I found a way to customize it on my own (dark color scheme,bigger font…)I didn't know how to do that in Firebug.

    NepaliFreeThinker

    (January 26, 2019 - 11:44 am)

    I am such a noooooob

    Tard

    (January 26, 2019 - 11:44 am)

    Jesus christ I've never used any of these features. WebKit FTW!

    Bo Xu

    (January 26, 2019 - 11:44 am)

    btw, live editng js does not seem to work.

    Mopshond000

    (January 26, 2019 - 11:44 am)

    can you save if you have a text changes?

    David Kovac

    (January 26, 2019 - 11:44 am)

    How can I save the edited stuff in "inspect element" ?

    dandymcgee

    (January 26, 2019 - 11:44 am)

    @panadesu Nobody is stopping you from using both! That's what I do. : )

    Jared Williams

    (January 26, 2019 - 11:44 am)

    I love the $0 feature.

    Nikyle Nguyen

    (January 26, 2019 - 11:44 am)

    3:08 "Author Quang Nguyen", a Vietnamese. It's nice 🙂

    TreeFiddy

    (January 26, 2019 - 11:44 am)

    Its very tempting to change to Chrome, i just love firefox so much 🙁

    labobo

    (January 26, 2019 - 11:44 am)

    more Chrome Developer videos please

    daniiboyy

    (January 26, 2019 - 11:44 am)

    awesome!!!

    Erik

    (January 26, 2019 - 11:44 am)

    woah, the view count is 13371=iLeet

    statikeffeck

    (January 26, 2019 - 11:44 am)

    nice overview. I am so used to using Firebug with Firefox which is why I haven't switched to Chrome for development purposes. With Firebug, I can press a key shortcut to start the inspection tool. Is such a thing possible with Chrome dev tools?

    Carlos Guimaraes

    (January 26, 2019 - 11:44 am)

    @6006133 LOL u right

Leave a Reply

Your email address will not be published. Required fields are marked *