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
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 . We will use the Echo Test on to learn about
Search WWH ::

Custom Search