-

The Power Of Chrome DevTools





Many people think that Chrome dev tools it’s used by only the developers and programmers and some geeks 😉who are interesting in figuring out some more tools, but the fact is the Chrome dev tools contain very powerful tools for everyone who is using the browsers for accessing the internet, especially Chrome browser because it’s a build-in on the Chrome browser and that will lead us to the definition of the Chrome dev tools.


Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser.

Put in mind that by using Chrome devtools, you will dispense with a lot of

 applications that help you to download photos and videos from Social Media, and

 no more extensions and debugging tools for the developers.


Now get ready and let’s learn the magic tools:

  • To Open the Chrome devtools:

    Basically, we can do that in many ways:
    1- The Inspect option Or press Command+Option+C (Mac) or Control+Shift+I (Windows, Linux, ChromeOS)

    2- Open by right-clicking and choosing Inspect




    3-     Click Customize and Control Google Chrome (The vertical three dots on the most top-right of the browser)






    Let’s get quick info about the devtools tabs:



  • Elements: This tab shows the Html code of the opened web page

  • Console: It logs the errors and the exceptions for the user, and you can some JavaScript commands on it.

  • Sources: Contains the tree files of the technologies and utils that the web page may have.

  • Network: In this tab, you can see the API requests and some utils that are shown when the page is reloaded or the causing an event like (Clicking a button)

  • Performance: This tab is used for analyzing your page performance

  • Memory: For recording the memory allocations using the sampling methods

  • Application: It’s consists of main four parts : (Application, Storage, Cash, Frame, and Background Services)

  • Security: In this tab, you can check if the web page is secured or not and you can check the connection and the resources secure


    Now after getting quick info about the devtools we can move to learn some tricks and magic things you can do with the devtools


    1-Downloading Protected Images From Any Website:

    Open the devtools and hover with your mouth courser on the protected image, in the Elements tab it will highlight the image tag which will show like this <image href=URL> hover on the URL in the Image tag and right click and save the image



    2-Downloading Video From Any Site:

    Visit the page in chrome and open ‘Developer Tool’ by pressing F12 or right-click -> inspect element Go to -> Networks Tab and click the ‘Media’ tag in the filter row Click the ‘Play’ button on the player. you will see a link in the networks tag Just open that link in the new tab. video will open in a normal browser’s player. Now right-click the on the video and ‘Save’ to your local machine


    3-Change The Web Page Design:

    By inspecting the web page and on the Elements tab on the devtools you will see the Html tags for the web page, in the right side you will see a small vertical panel consisting of many tabs : (Styles, Computed, Layout, and much more), in our case we need the Style tab when you open it you will see the CSS code that you can change for change the selected element design.


    4-Show The Text Written In Password Mode:

    Open the login form where you have your autocompleted password or any password field write anything there and inspect the page to see the devtools then select the password field and on the Elements tab will highlight the Input tag: <Input type:” Password”> now you just need to change the Input type from password → and you will able to the password.


    5-See The Web Page In Different Screen Sizes:

    Besides the Element tags on the Devtools, you will see an icon called “toggle device toolbar” click on it, then you will be able to change the screen size to any size you want : (mobile in different sizes, tabs, notebooks,…).


    6-See What Technology a Site Is Using:

    With Developer Tools open in the Elements tab, find the <head> tag in the HTML and click on it to expand the section, You’ll see all the tracking JavaScript for the site.



  • Finally, I would like to say that the Chrome Developer Tools is a very important and powerful thing that every user should know how to use it and every developer have to master it.



  • Thank you for your attention and if you need to know more to master the Devtools in general.



  • Don’t forget to follow me on Twitter where I tweet about Game Development and programming in general → Twitter
    And my Github account → Github

Comments

Post a Comment

Popular posts from this blog

Tic Tac Toe

-
Image
If you are one of the people who like to learn through videos 😉, you can follow the explanation through a quick video on YouTube 👉 Setting up the Project: Start by opening Unity and creating a new 2D project. Name the project " TicTac " (or any other name as preferred). Choose a Location so save the Project. Select " 2D " to set the default Project Type to 2D . Click the " Create project " button to create the project Creating the game board: We need to create the background, create the game board and then break up the game board into 9 uniform spaces with a grid overlay. As we will be using the built-in UI toolset for this, the first thing we need to create is a UI Panel . 1- Create a new UI Panel element in the scene by using Create > UI > Pane l 2- This will create a new UI Panel , parent Canvas, and EventSystem in the scene. The Canvas and the Event System are required by the UI toolset. We will adjust the canvas scale to fit
Read more
-
Image
What about Vim? If you’re a developer or a system administrator, chances are you’ve heard of Vim, a powerful and popular text editor that has been around for more than 30 years. In this article, we’ll take a brief look at the history of Vim and show you how to use it to edit text efficiently and effectively. Let’s Start With A Brief History of Vim: Vim, which stands for Vi Improved, is a text editor based on the original Vi editor, which was created in 1976 by Bill Joy, one of the founders of Sun Microsystems. Vi was included with Unix operating systems and quickly became a popular text editor due to its powerful editing capabilities and small size. Here you can find some Vi commands Vi editor In 1984, Bram Moolenaar, a Dutch computer programmer, created Vim as an improved version of Vi. Vim added many new features and improvements, such as syntax highlighting, multi-level undo and redo, and support for various programming languages. Vim quickly gained popularity among programmers and
Read more

Angry Birds Using Unity 2D

-
Image
           Basically, the game series focuses on a flock of birds referred to by the same name who try to save their eggs from  green-colored  pigs. Inspired by the game Crush the Castle🏠, the game has been praised for its successful combination of fun gameplay, comical style, and low price. Its popularity led to many spin-offs, versions of  Angry Birds  created for PCs and video game consoles, a market for merchandise featuring its characters,  Angry Birds  Toons, a televised animated series, and two films; The  Angry Birds  Movie and its sequel The  Angry Birds  Movie 2. By January 2014, there had been over 2 billion downloads across all platforms 😎, including both regular and special editions                            If you are one of the people who like to learn through videos 😉, you can follow the explanation through a quick video on YouTube 👉 Part 1  Part 2 In this article, we will create the Angry Birds game using unity 2d and some scripts using C# by following these steps
Read more