What are DevTools, which we all know as Developer Console? How to use? What advantages does it provide us? In this article, we will look at the developer console, what it is, how it works, how to open it on an external page or anywhere on the screen, and what advantages it offers us.
What is DevTools (Developer Console)?
“DevTools,” is an abbreviated name and is commonly known as “Developer Tools.” It is a set of tools that web developers can use in their browsers. These tools help them analyze the structure, performance, errors and many other aspects of web pages. They often come as part of browsers and allow developers to develop web pages more effectively. DevTools provide in-depth knowledge of web technologies such as HTML, CSS, and JavaScript, making it easy to debug, analyze performance, and optimize web pages when working with these technologies. Google Chrome, Mozilla Firefox, Safari and many other modern browsers offer such tools to developers.
What Can Be Done with DevTools (Developer Console)?
Developer Tools (DevTools) is a powerful toolset that allows web developers to analyze, debug and optimize web pages running in the browser.
The first main feature of DevTools is that it offers HTML and CSS editing. Thanks to this feature, you can edit the code of your web page live. This is a great way to quickly change the design and see results instantly.
Second, DevTools provides a set of tools for debugging JavaScript. You can add breakpoints, monitor variables, examine the Call Stack, and more.
Network analysis is another important feature of DevTools. You can view and analyze page load times, resources (e.g. images, style files, JavaScript files), and each request. This is an invaluable tool for identifying and optimizing performance issues.
Finally, DevTools has a console feature. This allows you to interact with your JavaScript code. You can run JavaScript code, see errors, try variables, and more. The console also provides general information about the status of your web page.
How to Open DevTools in Browsers?
Methods of opening DevTools (developer console) in browsers according to Mac and Windows operating systems;
Google Chrome:
1. Mac:
– Keyboard shortcut: Cmd + Opt + I
– From the menu: Click the menu icon (three vertical dots), select “More Tools”, then select “Developer Tools”.
2.Windows:
– Keyboard shortcut: Ctrl + Shift + I
– From the menu: Click the menu icon (three vertical dots), select “More Tools”, then select “Developer Tools”.
Mozilla Firefox:
1. Mac:
– Keyboard shortcut: Cmd + Opt + I
– From the menu: Click the menu icon (three vertical lines), select “Web Developer”, then select “Toggle Tools”.
2. Windows:
– Keyboard shortcut: Ctrl + Shift + I
– From the menu: Click the menu icon (three vertical lines), select “Web Developer”, then select “Toggle Tools”.
Safari:
Mac:
– Keyboard shortcut: Cmd + Opt + C (opens Console)
– From the menu: Click “Preferences” in the Safari menu, then switch to the “Advanced” tab and check the “Show Develop menu in menu bar” option. Now the “Develop” tab appears in the menu, from here you can select the “Show Web Inspector” option.
Other browsers:
– In other browsers, Developer Tools is usually opened in a similar manner via keyboard shortcuts or menus. Specific versions or updates of browsers may change these shortcuts or menu options, so it is important to check the most up-to-date information from the browser documentation or relevant sources.
Opening DevTools in Chrome
To open developer tools on a page, right-click somewhere and click inspect.
Developer Tools opens the Elements panel and selects the element in the DOM tree. In the Styles pane, you can see the CSS rules applied to the selected element.
Additionally, to open the developer tools, click on the 3 dots in the upper right corner on the relevant page and select More Tools > Developer Tools.
| OS | ELEMENTS | CONSOLE | LAST PANEL |
|---|---|---|---|
| Windows or Linux | Ctrl + Shift + C Ctrl + Shift + J | F12 | Ctrl + Shift + I |
| Mac | Cmd + Option + C Cmd + Option + J | Fn + F12 | Cmd + Option + I |
DevTools Overlay
We can place the developer tools section that we open in browsers in the desired areas of our browser according to our intended use.
You can choose the placement you want from the section that says Dock side.
- The first icon opens the developer tools screen in a new browser window,
- The second icon opens the developer tools screen on the left side of the browser,
- The third icon opens the developer tools screen on the right side of the browser,
- The fourth icon opens the developer tools screen at the bottom of the browser.
These don’t work for you and you want to open developer tools in a new tab. To do this, all you need to do is write the following codes according to the operating system you use,
#macOS
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
#windows
start chrome --auto-open-devtools-for-tabs
#linux
google-chrome --auto-open-devtools-for-tabs
Paylaş
Takip Et
Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ
