HTML and CSS Reference
In-Depth Information
Figure A-1.
Opening Google Chrome Developer Tools
Google Chrome Developer Tools provide you with detailed information about your
page or application through eight panels, allowing you to perform the following tasks:
•
Elements panel: inspect and modify the DOM tree
•
Resources panel: inspect resources loaded
•
Network panel: inspect network communication; this is the
panel you'll use the most while building WebSocket-enabled
applications.
•
Sources panel: inspect source files and debug JavaScript
•
Timeline panel: analyze where time is spent when loading or
interacting with your page
•
Profiles panel: profile the time and memory usage
•
Audits panel: analyze the page as it loads and makes suggestions
to improve it.
•
Console: display error messages and execute commands. The
console can be used along with any of the above panels. Press the
Esc key on your keyboard to open and close the console. Along
with the Network panel, the Console is the Web and WebSocket
developer's best friend.
First, let's take a closer look at the Network panel. Open Chrome and navigate to
