![]() ![]() It is also possible to replace the result from the search bar. It allows you to select if you want to search in a case-sensitive manner or even with a regular expression. You can open the search bar thanks to ⌘ + f (Mac) Ctrl + f (Win/Linux). The editor gives you the ability to evaluate quickly some pieces of JavaScript in the console thanks to its contextual menu. If you need to manipulate minified resources without source maps, the JavaScript, HTML and CSS editors can pretty print the content of the resource thanks to the action at the bottom of the editor. It is also possible to add source maps to a minified file directly in the editor using the contextual menu. If source maps have been detected, the editor will load them directly showing you a version of the code that should be easier to read and debug. When a file is opened in the editor, it will try to detect if source maps are available. Editors can be opened to manipulate both local or remote resources.Ĭhrome Devtools provide syntax highlighting for CSS, HTML and JavaScript files. On the top left and top right corners of the editor, you have some actions to show or hide the navigator panel or the debugger if you want to give more room to the editors. In the center of the Sources tab, you will find see the editor area where you can view and even edit some resources. In the example above, the result of the code snippet uses a table to show all the colors used on my page. If you want to write your own snippets, don’t forget to leverage all the amazing features of the Chrome Devtools Console API to create tables or groups for example. You can find collections of snippets online to speed up your development process. ![]() This way a snippet named allcolors can be executed by typing !allcolors. It is possible to execute a snippet without having to right-click on it by starting your request with !. The shortcut ⌘ + o (Mac) Ctrl + o (Win/Linux) lets you execute a command or open any resource quickly. Your snippet will be executed in the context of the current page. In order to run it, right-click on it and execute it. To create a new snippet, you will have to provide a name and some JavaScript code. The Snippets drawer contains some pieces of code that you may want to execute from time to time to help you debug your applications. Here you have one of the scripts used by the uBlock origin extension. Some of those extensions may modify heavily the behavior of your web application and the Content Scripts drawer lets you see their code and debug it if you encounter an issue. Debugging your application in a real environment means that you will have to consider some popular extensions installed by your end users like ad-blockers. The Content Scripts drawer let you see the resources loaded by the extensions installed in Chrome. Chrome Devtools provide support to preview the most popular kind of resources like HTML, CSS, JavaScript files, images, and even fonts. Click on any of those resources to have a look at their content. HTML pages will appear with a grey icon, CSS files with a purple one, JavaScript files with a yellow one and some resources like images or fonts will have a green icon. In the Sources drawer, inside of the navigator, all the resources loaded for the current page are visible. The Sources tab is divided into four different areas, on the left, the navigator is available with various drawers like Sources or Content Scripts, on the right, you have the debugger, in the center, you can find the editor and on the bottom, you have some drawers for the Console and additional tools. After having a look at the debugging of the DOM first and then all the secrets of the Console in the second part, in the third part of this analysis of the Chrome Devtools, we will detail the tooling provided by Chrome to view, edit and debug our code thanks to the Sources tab. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |