Chrome DevTools

Chrome DevTools

The Google Chrome Developer Tools is a consolidated environment built into Google Chrome Browser. It is used for web authoring, debugging, monitoring, optimizing, and understanding web applications or websites.

How you can access the DevTools

1.Google Chrome – F12 Web Developer Tools

2.Internet Explorer – F12 Web Developer Tool

3.Safari – Safari Web Development Tools

4.Firefox – F12 Web Console / Browser Console / Firebug

5.Opera – Opera Dragonfly

Overview

• Elements : The elements panel can be used to interact with the layout and design of the web app, manipulating freely the CSS to see the changes live.
• Console : The console can be used in two ways: you can either use it to log diagnostic information or use it as a shell to interact with the JavaScript on the page.
• Sources: Use the sources panel to debug your JavaScript or connect your local files via Workspaces to use the live editor.
• Network: The network panel will give you an overview of the requested and downloaded resources. You can also optimize your page load performance from this panel.
• Timeline: The timeline panel is there to help with the runtime performance of your page by recording and exploring events happened during the page lifecycle.
• Profiles: This panel is an addition to the timeline panel and will give you more information regarding particular events.
• Application: In this panel, you can inspect all the resources that are being loaded on your website, including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and stylesheets.
• Security: This panel will help you deal with mixed issues, problems with certificates and more.

Elements panel

1. The elements panel can be used to interact with the layout and design of the web app.
2. Inspect and live edit your site’s design and content.
3. In the Elements Panel, you can live-edit a DOM node by simply double-clicking a selected element and making changes
4. You can even live-edit style property names and values in the Styles pane.
5. You can verify the max and min length of the text via Inspect the element and writing in html.
6. You can verify weather the click event listener is applied or not.
7. You can reveal the hidden passwords.

Network panel

The Network panel consists of five panes:

Controls. Use these options to control how the Network panel looks and functions.
Filters. Use these options to control which resources are displayed in the Requests Table.
Overview. This graph shows a timeline of when resources were retrieved. If you see multiple bars stacked vertically, it means that those resources were retrieved simultaneously.
Requests Table. This table lists out every resource that was retrieved. By default, this table is sorted chronologically, with the earliest resources at the top. Clicking on the name of a resource yields more information about it. Right-click on any of the table headers to add or remove columns of information.
Summary. At a glance this pane tells you the total number of requests, amount of data transferred, and load times.

       What you can check in the Network panel for testing point of view

• The Network Panel allows you to see how your page renders, and time taken to render from start to end.

• You can click on the camera icon and refresh the page on the device.

• You can see which assets were loaded, when they were loaded, in what order they were loaded, and so on.

• Also, you can check the status of the request.

• You can copy request and response.

• You can filter the request based upon Status-code, method name.

• You can see the all ajax request in XHR tab this is important for single page application.

Server Response Codes

• 1xx Informational: Request received, continuing process.
• 2xx Success: Standard response for successful HTTP requests.
• 3xx Redirection: This class of status code indicates the client must take additional action to complete the request. Many of these status codes are used in URL redirection
• 4xx Client Error: The 4xx class of status codes is intended for situations in which the client seems to have erred.
• 5xx Server Error: The server failed to fulfill an apparently valid request.

   

     Timeline panel

• The timeline panel is there to help with the runtime performance of your page by recording and exploring events happened during the page lifecycle.

• It’s the best place to start investigating perceived performance issues in your application.

• To make a recording of a page load,

• 1)open the Timeline panel,

• 2)open the page that you want to record, and then reload the page.

• 3)The Timeline panel automatically records the page reload. 

• Record the Timeline to analyze every event that occurred after a page load or a user interaction

• Here are some more details you can view using the Record Timeline

• View FPS, CPU, and network requests in the Overview pane

• Click on an event within the Flame Chart to view details about it

• Zoom in on a section of a recording to make analysis easier

    Security panel

• To view the overall security of a page, open DevTools and go to the Security Panel.
• The first thing you see is the Security Overview. At a glance, the Security Overview tells you whether the page is secure. A secure page is indicated with the message This page is secure (valid HTTPS).
• Click View certificate to view the server certificate for the main origin.
• A non-secure page is indicated with the message This page is not secure. The Security Panel distinguishes between two types of non-secure pages.

1.If the requested page is served over HTTP, then the main origin is flagged as not secure.
2.If the requested page is retrieved over HTTPS, but the site includes HTTP resources.

Sources panel

• All the fronted HTML and JS files is available in the sources panel.
• You can use a breakpoint to debug the source code
• You can view the configuration.js file and check weather all the configuration urls and variables are correct

Console Panel

• When something goes wrong, open the DevTools console (Ctrl+Shift+J / Cmd+Option+J) to view the JavaScript error messages. Each message has a link to the file name with the line number you can navigate to
• You can see the errors, warnings, logs, info in the network call or JS in console tab.
• You can execute small JS code in the console tab.
• Copy images with help of console.
• Copy all the urls from the webpage. 

   Reload in Chrome browser

When the “Developer Tools” console is open in Google Chrome, the Reload button gets a drop down menu with some options.

Next, right-click on the browser Reload button visible in the upper left-hand corner of your computer screen.

Now, you can find 3 Reload Options displayed:

Normal Reload: Uses Cached Data

Hard Reload: Forces browser to re-download items and reload. It is possible that used resources may come from a cached version.

Empty Cache & Hard Reload: Cache for the page is cleared completely and everything must be re-downloaded as required.

Simulate Mobile Devices with Device Mode

• Device fragmentation is a very real problem when testing Web apps on real devices, particularly for UI and functional tests. The number of devices with unique specifications and proprietary build variations has increased. At an advanced level, to fully test your Web App’s responsiveness and performance on real devices you will need to experiment your site on various platforms, across a number of device form factors.
• Head over to Chrome Dev tools and toggle the Device Mode button to turn Device Mode on or off.
• Select the device you want and test how your website looks in that device.
• Device mode allows us to check whether a website is mobile friendly or not.
• How your website looks on various devices.
• This integration allows you to test Web Apps on different sizes and configurations.
• Enable a wide variety of screen resolutions and sizes to be tested.
• Use network throttling to simulate different network speeds
• Extra options to view the touchpoint size
• No mobile test is complete without having tested on real devices as well