Alternatives to Google Chrome Developer Tools for Mac, Windows, Web, Linux, Firefox and more. Filter by license to discover only free or Open Source alternatives. This list contains a total of 22 apps similar to Google Chrome Developer Tools. List updated: 5:42:00 PM. While other browsers offer pretty handy troubleshooting tools, Chrome DevTools is worth. Chrome is the most popular browser for developers due to its powerful suite of debugging tools. Using Chrome DevTools is easy, but you need to understand how. Microsoft Edge (Chromium) Developer Tools.; 7 minutes to read; In this article. Microsoft Edge has adopted the Chromium open source project to create better web compatibility and less fragmentation of different underlying web platforms. To get the developer tools in Chrome on a Mac, go to the View menu, select Developer and then Developer Tools. On a PC, go to Tools (or More Tools) and select Developer Tools. Or right-click on any element and select Inspect Element. Select Elements from the menu that runs across the top of this tool.
You might have heard of this powerful feature in your Chrome browser – Chrome Development tools. And while it's true, that most of it is useful for web developers, there are times when it's useful to an average internet user. In this article, we will focus on useful stuff that you can do with Chrome developer tools. Like, how to bypass restrictions set by the website, finding out fonts, colors, and images that are hidden on the surface or even forgot passwords.
How to open Developer tools in Chrome?
To open Chrome developer tools in Google Chrome, click on Customize chrome ( ⋮ ) > More tools -> Developer tools. You can also right-click on the page you want to edit and choose Inspect. I like to use the keyboard short Ctrl+Shift+I (Cmd+Option+I for Mac).
By default, it opens a new window to right, but I prefer to keep it in the bottom, as it gives me more room to expand it. To move the window to the bottom click the 3 vertical dots button on the top right ( ⋮ ) then choose the bottom docking option. You can also turn on the dark mode from the Settings, makes it easier on the eyes. Now the next time open inspect element, it'll remember my changes.
Also Read: How to change google chrome background
10 Chrome Developer Tools Tips
1. Edit a Web Page
Now, this is the most basic use of the Developer tools but has to be included. You can temporarily edit any Web page (like Wikipedia) in your browser. To do this, open any web page you would like to edit on Chrome and right-click and choose Inspect Element. Go to the console tab (should be the second option from the top), next paste the following line of code and hit enter.
document.body.contentEditable = true
This will make the entire webpage editable like any Word document. Just click anywhere and start typing. Although do remember all the effects will be gone once you refresh the page. So, make sure you screenshot the page before closing the browser.
2. Reveal the saved Password
Say you want to login to your Instagram on your mobile, but you don't remember the password. Fortunately, you have it saved in your browser. Now, instead of going through the painstaking process of password reset, you can use developer tools to reveal the hidden password.
Right-click the password field and then choose 'Inspect Element.' This will open the document inspector window and all you have to do is replace the word 'password' with 'text' in the password-type input field. And this should reveal the password hidden in asterisks.
3. Take a Screenshot of the webpage
Did you know that you can take a screenshot of the webpage using the Chome Dev Tools without using any additional Plugin? The feature is pretty simple and offers only two settings, The visible part of the webpage, the entire webpage. It can capture the screenshots for the mobile version of the webpage and you can choose a few mobile layouts from the drop-down menu on top.
To capture the screenshot open Chrome developer tools. Go to the Console tab, and press ctrl + shift + M(windows) or cmd + opt + M(Mac). Next, click on 3 dots menu on the top-right of the webpage and select Capture Screenshot or Capture full-size screenshot. And that's it, your screenshot will be saved in the downloads folder.
Also Read: 7 Best Chrome Screenshots Extensions for every Need
There are other ways to take screenshots and you can always install a screenshot extension or use the computer's native screenshot shortcut, prtsc(windows) and cmd+ shift + 4(MacOS) but this method works just as fine.
4. Use the Color Picker
I'm a sucker for minimal colors and more often than not, I'm scrolling minimal images on Google to get inspiration for features images and thumbnails. Or say, if a particular website's color scheme that catches your eye, and wants to find out what color they are using, well you can always install a color picker extension. But there is a faster way to do it.
Bring up the Chrome Development tools, in the left side click on Style tab, click on the small box next to the color. This will bring up Color picker tool, now, click on anywhere on the webpage, whose color you want to find out and the color picker will give you the hex code. Simply copy the hex code and paste it in Photoshop. Crack office for mac os.
5. Change Website to the Mobile Layout
Whenever you open a website, a lot of your data is sent under the hood, like your IP address, exact date and time, the URL, where are you coming from and the User-agent.
The user agent helps the website to identify your browser. And in some cases changing the user-agent helps. For example, if you want to check if your website is responsive or not. But my favorite one is accessing the different version of the website. For example, some govt websites in India open in Internet Explorer only, or for a global example, let's take Instagram. As you know, you can not upload pictures to Instagram he on the computer, but you can do it from its mobile website. So, why not masquerade the desktop browser to that of mobile?
To do this, fire up the Chrome Development tools, Click on 3 vertical dots, and under more Tools select Network conditions. There uncheck the box that says, User agent, select automatically and from the popup box select a Mobile Browser. If you are trying to access a govt website select a different compatible browser. Now close the window and refresh the page. As you can see, there is a fully functional upload button, which you can use to upload pictures to Instagram from the computer.
6. Search Anything
Another useful feature that's hard to pinpoint is the search. The 'Search' tab allows you to search a web page for specific content or an HTML element.
For example, say if you want to know what font a website is using, you'll need to click the 3 dots then click Search and type in font or to be precise use font-family, and you can find the information in the lines of code.
Or let's take another example, I stumble upon a website that using a video in the background and I'm curious to find out which video is it exactly, Now, saving the page won't work. Instead, use the Chrome Development tool, and search for 'video' scroll through the results and see if you get any URL. In that case use common sense, if it's a video file, it mostly like have an extension of mp4, try that. And there you go, now you have a couple of results with mp4, one of that should be the video file, click on it to bring up the URL. Copy that URL and paste in the browser, and off you go.
7. Remove Popups
Another useful feature of i is removing pop-ups from the website. For instance, let's take Quora- a popular question answer website that offers content to its members only. If you come to this site from Google and try to read more than one page, a pop-up will appear asking you to sign-up. Here is how to remove it, right-click on the page and bring up the Inspect elements. Move your cursor to the line of code until pop-up window (covering the content) gets highlighted. Once done, delete that line of code. Sometimes there is another transparent layer on the page's body, that makes the links unresponsive. Delete that as well.
Read: How to see Blocked Content on Websites
8. Change Your Browser GPS Location
Now, there are 2 ways, any website find out where you are browsing from – your IP address and your browser's location. While you can easily change the IP address, by using our VPN and Smart DNS, it's not easy to change browser location.
For example, the other day, I was browsing CBS with VPN, and everything worked fine. But, when I decided to watch local channels on CBS and it showed me a popup asking for my browser location. And then click on Allow, it says the content is not available in my location.
To fix that, open Developer Console, by right-clicking on the screen. At the bottom of the panel, press the three-dot button on the top right, and then click the 'Sensors' option from More. A new window will open in the bottom half of the developer tools window, Under Geolocation, select 'Custom location.' Now put in your location based on latitude and longitude, if you don't know these values, you can always use Google maps. Or just select the name of the city like California. Now, Reload the page, allow location data in the pop-up window. And now if I refresh the page, and click on allow location, as you can see, I'm now able to stream local stations.
9. Use Ruler
Just like a Color Picker tool, Google Chrome Developer Tools also Include a Ruler. This comes in hand when you want to measure pixels across the height and width of the page.
To bring up the Ruler, right-click on the page where you would like to use a ruler and click 'Inspect Element'. Next, you need to enable it for the first time, click on the 3 vertical dots in the top-right and Settings. A new window will open, under the Elements section select Show Ruler option.
10. Limit download speed on Chrome
If you want to limit the downloads speed, you can do that with Chrome Dev tools. It does not just limit the download speed of actual packages but streaming as well. Basically, you can isolate a tab and make the tab load according to the speed you just set. It works like a charm when you want to limit the bandwidth on your browser while watching a movie.
To set the speed for a tab, go to the developer options, and click on the options button right next to audit and select settings or you can just press F1 key directly to open the settings. Go to the Throttling tab and click ‘Add custom Profile'. You can name the profile and set the download and upload speed. After adding the figures, Click ‘Add' and you're done.
This profile would only work on the currently open tab and you would have to keep the developer options window active otherwise the throttling won't work. To activate the profile, go to the network tab in developer tools and click the drop-down menu right next to Offline. Select the custom profile and your page is now throttled. Anything downloaded from this page will be throttled to the set limit. Just make sure not to close the inspect element window or refresh the page.
How do you use Chrome Developer tool?
Overall, the developer tools have more use cases than messing around with your fav websites. In short, anything that the website is not doing on the server side can be altered with Chrome developer tools. Alternatively, you can use the Web Developer extension to get one-click access to all the features and more.
Are you a Developer? Then am sure that you will take a look at this written piece for a while. What if you are a newbie to the field and you got confused by hearing about Chrome DevTools App for Remote debugging. The air around will turn to a cyclone of confusions ,without knowing what is this remote debugging or what is this Chrome DevTools App etc. Then for sure you will glue your eyes to this to clear all your confusions .
Now what will you do next is search for your doubts in online but you will end with a headache as you don't know where to start and what to read. So here I am covering almost all details you need to know to do your work effectively.
So the first thing where we are going to start is by knowing what exactly is Debugging and what precisely is Remote Debugging .
What is Debugging ?
You may be familiar about ‘bugs' which may lead to incorrect operation of our system or computer software. Such sort of defects and bugs need to find out and have to be resolved. Isn't it? Subway surfer for mac os. Yea, so in simple that process of finding and resolving the bugs which affect proper functioning of system or software is known to be Debugging.
There are so many techniques of debugging practiced by the developers . Let's take a quick glance on various techniques of debugging .
- Print debugging (or tracing) .
- Remote debugging
- Post-mortem debugging.
- 'Wolf fence' algorithm.
- Delta Debugging.
- Saff Squeeze.
Well these are the various debugging techniques .
Now What is Remote Debugging ?
You can very well can say one thing as of now .That it is a debugging technique.
The process by which a program which is running on a different system that of the debugger is debugged (i.e. the finding and resolving the bugs which affect proper functioning of system or software) is called Remote Debugging.
How Remote Debugging is done?
First the debugger gets connected by a network to a remove system.
Once connected over network to remote system then the debugger can take control of the different program's execution on the remote system
The debugger can thus get back or retrieve details about the state of the remote system.
You might be known about different remote debugging tools such as Chrome DevTools App , Remote Tools for Visual Studio , Remote web inspector , PonyDebugger etc . So we are here to discuss primarily about Chrome DevTools App .
So What is Chrome DevTools App
You would have heard DevTools commonly. It is just the short way we call 'Chrome Developer Tools '. If you don't know what it is then to tell in simple words we can say that these are certain set of web authoring (helps in developing your web content in DTP format or also to illustrate the way of making website from writing in HTML code to textual content of web pages) and debugging (finding and resolving the bugs which affect proper functioning of system or software is known to be Debugging.) tools that are built into Google Chrome.
What it offers ?
To web developers its offers deep rooted keen access to web application as well the internals of the browser. It would aid in track down issues related to the layout , get code optimization insights , set JavaScript breakpoints.
Now you are all clear about the basic things . So let's move on to the core topic.
Kenneth Auchenberg had many reasons which insisted him in creating this application – Chrome DevTools App .He wanted to give something that gives easiness in work to web developers across the globe. The great challenge of web developers is do remote debugging from multiple browsers across. Kenneth Auchenberg made it possible through his application. From the same app , an unified platform ; remote debugging across multiple browsers was made to a reality.
More about this application in brief :-
His sole attempt with this app was to take devtools out of browser particularly here it is Chrome browser The NW.js based built application can work efficiently on Linux , Windows as well as on Mac OS X.
How to Access DevTools
- In your Google Chrome just open a web app or a web page .
- On your browser windows top right you can find Chrome menu.
- Now you have to click Tools > Developer Tools.
- Choose Inspect Element by doing a right click on any element of the page.
Now, let's come back to our main problem – how do you enable Google DevTools for Remote Debugging?
Installation.To do remote debugging using Chrome DevTools app you need that application to be installed on your system and you should have a Chrome browser. Well you know to install chrome browser as it's not a big deal being a web developer.
- Download and extract Chrome-Devtools.app.zip.
- And run the application by double clicking.
- Now open your Chrome Browser and enable remote debugging.
I'm a sucker for minimal colors and more often than not, I'm scrolling minimal images on Google to get inspiration for features images and thumbnails. Or say, if a particular website's color scheme that catches your eye, and wants to find out what color they are using, well you can always install a color picker extension. But there is a faster way to do it.
Bring up the Chrome Development tools, in the left side click on Style tab, click on the small box next to the color. This will bring up Color picker tool, now, click on anywhere on the webpage, whose color you want to find out and the color picker will give you the hex code. Simply copy the hex code and paste it in Photoshop. Crack office for mac os.
5. Change Website to the Mobile Layout
Whenever you open a website, a lot of your data is sent under the hood, like your IP address, exact date and time, the URL, where are you coming from and the User-agent.
The user agent helps the website to identify your browser. And in some cases changing the user-agent helps. For example, if you want to check if your website is responsive or not. But my favorite one is accessing the different version of the website. For example, some govt websites in India open in Internet Explorer only, or for a global example, let's take Instagram. As you know, you can not upload pictures to Instagram he on the computer, but you can do it from its mobile website. So, why not masquerade the desktop browser to that of mobile?
To do this, fire up the Chrome Development tools, Click on 3 vertical dots, and under more Tools select Network conditions. There uncheck the box that says, User agent, select automatically and from the popup box select a Mobile Browser. If you are trying to access a govt website select a different compatible browser. Now close the window and refresh the page. As you can see, there is a fully functional upload button, which you can use to upload pictures to Instagram from the computer.
6. Search Anything
Another useful feature that's hard to pinpoint is the search. The 'Search' tab allows you to search a web page for specific content or an HTML element.
For example, say if you want to know what font a website is using, you'll need to click the 3 dots then click Search and type in font or to be precise use font-family, and you can find the information in the lines of code.
Or let's take another example, I stumble upon a website that using a video in the background and I'm curious to find out which video is it exactly, Now, saving the page won't work. Instead, use the Chrome Development tool, and search for 'video' scroll through the results and see if you get any URL. In that case use common sense, if it's a video file, it mostly like have an extension of mp4, try that. And there you go, now you have a couple of results with mp4, one of that should be the video file, click on it to bring up the URL. Copy that URL and paste in the browser, and off you go.
7. Remove Popups
Another useful feature of i is removing pop-ups from the website. For instance, let's take Quora- a popular question answer website that offers content to its members only. If you come to this site from Google and try to read more than one page, a pop-up will appear asking you to sign-up. Here is how to remove it, right-click on the page and bring up the Inspect elements. Move your cursor to the line of code until pop-up window (covering the content) gets highlighted. Once done, delete that line of code. Sometimes there is another transparent layer on the page's body, that makes the links unresponsive. Delete that as well.
Read: How to see Blocked Content on Websites
8. Change Your Browser GPS Location
Now, there are 2 ways, any website find out where you are browsing from – your IP address and your browser's location. While you can easily change the IP address, by using our VPN and Smart DNS, it's not easy to change browser location.
For example, the other day, I was browsing CBS with VPN, and everything worked fine. But, when I decided to watch local channels on CBS and it showed me a popup asking for my browser location. And then click on Allow, it says the content is not available in my location.
To fix that, open Developer Console, by right-clicking on the screen. At the bottom of the panel, press the three-dot button on the top right, and then click the 'Sensors' option from More. A new window will open in the bottom half of the developer tools window, Under Geolocation, select 'Custom location.' Now put in your location based on latitude and longitude, if you don't know these values, you can always use Google maps. Or just select the name of the city like California. Now, Reload the page, allow location data in the pop-up window. And now if I refresh the page, and click on allow location, as you can see, I'm now able to stream local stations.
9. Use Ruler
Just like a Color Picker tool, Google Chrome Developer Tools also Include a Ruler. This comes in hand when you want to measure pixels across the height and width of the page.
To bring up the Ruler, right-click on the page where you would like to use a ruler and click 'Inspect Element'. Next, you need to enable it for the first time, click on the 3 vertical dots in the top-right and Settings. A new window will open, under the Elements section select Show Ruler option.
10. Limit download speed on Chrome
If you want to limit the downloads speed, you can do that with Chrome Dev tools. It does not just limit the download speed of actual packages but streaming as well. Basically, you can isolate a tab and make the tab load according to the speed you just set. It works like a charm when you want to limit the bandwidth on your browser while watching a movie.
To set the speed for a tab, go to the developer options, and click on the options button right next to audit and select settings or you can just press F1 key directly to open the settings. Go to the Throttling tab and click ‘Add custom Profile'. You can name the profile and set the download and upload speed. After adding the figures, Click ‘Add' and you're done.
This profile would only work on the currently open tab and you would have to keep the developer options window active otherwise the throttling won't work. To activate the profile, go to the network tab in developer tools and click the drop-down menu right next to Offline. Select the custom profile and your page is now throttled. Anything downloaded from this page will be throttled to the set limit. Just make sure not to close the inspect element window or refresh the page.
How do you use Chrome Developer tool?
Overall, the developer tools have more use cases than messing around with your fav websites. In short, anything that the website is not doing on the server side can be altered with Chrome developer tools. Alternatively, you can use the Web Developer extension to get one-click access to all the features and more.
Are you a Developer? Then am sure that you will take a look at this written piece for a while. What if you are a newbie to the field and you got confused by hearing about Chrome DevTools App for Remote debugging. The air around will turn to a cyclone of confusions ,without knowing what is this remote debugging or what is this Chrome DevTools App etc. Then for sure you will glue your eyes to this to clear all your confusions .
Now what will you do next is search for your doubts in online but you will end with a headache as you don't know where to start and what to read. So here I am covering almost all details you need to know to do your work effectively.
So the first thing where we are going to start is by knowing what exactly is Debugging and what precisely is Remote Debugging .
What is Debugging ?
You may be familiar about ‘bugs' which may lead to incorrect operation of our system or computer software. Such sort of defects and bugs need to find out and have to be resolved. Isn't it? Subway surfer for mac os. Yea, so in simple that process of finding and resolving the bugs which affect proper functioning of system or software is known to be Debugging.
There are so many techniques of debugging practiced by the developers . Let's take a quick glance on various techniques of debugging .
- Print debugging (or tracing) .
- Remote debugging
- Post-mortem debugging.
- 'Wolf fence' algorithm.
- Delta Debugging.
- Saff Squeeze.
Well these are the various debugging techniques .
Now What is Remote Debugging ?
You can very well can say one thing as of now .That it is a debugging technique.
The process by which a program which is running on a different system that of the debugger is debugged (i.e. the finding and resolving the bugs which affect proper functioning of system or software) is called Remote Debugging.
How Remote Debugging is done?
First the debugger gets connected by a network to a remove system.
Once connected over network to remote system then the debugger can take control of the different program's execution on the remote system
The debugger can thus get back or retrieve details about the state of the remote system.
You might be known about different remote debugging tools such as Chrome DevTools App , Remote Tools for Visual Studio , Remote web inspector , PonyDebugger etc . So we are here to discuss primarily about Chrome DevTools App .
So What is Chrome DevTools App
You would have heard DevTools commonly. It is just the short way we call 'Chrome Developer Tools '. If you don't know what it is then to tell in simple words we can say that these are certain set of web authoring (helps in developing your web content in DTP format or also to illustrate the way of making website from writing in HTML code to textual content of web pages) and debugging (finding and resolving the bugs which affect proper functioning of system or software is known to be Debugging.) tools that are built into Google Chrome.
What it offers ?
To web developers its offers deep rooted keen access to web application as well the internals of the browser. It would aid in track down issues related to the layout , get code optimization insights , set JavaScript breakpoints.
Now you are all clear about the basic things . So let's move on to the core topic.
Kenneth Auchenberg had many reasons which insisted him in creating this application – Chrome DevTools App .He wanted to give something that gives easiness in work to web developers across the globe. The great challenge of web developers is do remote debugging from multiple browsers across. Kenneth Auchenberg made it possible through his application. From the same app , an unified platform ; remote debugging across multiple browsers was made to a reality.
More about this application in brief :-
His sole attempt with this app was to take devtools out of browser particularly here it is Chrome browser The NW.js based built application can work efficiently on Linux , Windows as well as on Mac OS X.
How to Access DevTools
- In your Google Chrome just open a web app or a web page .
- On your browser windows top right you can find Chrome menu.
- Now you have to click Tools > Developer Tools.
- Choose Inspect Element by doing a right click on any element of the page.
Now, let's come back to our main problem – how do you enable Google DevTools for Remote Debugging?
Installation.To do remote debugging using Chrome DevTools app you need that application to be installed on your system and you should have a Chrome browser. Well you know to install chrome browser as it's not a big deal being a web developer.
- Download and extract Chrome-Devtools.app.zip.
- And run the application by double clicking.
- Now open your Chrome Browser and enable remote debugging.
Here is command to do this on Mac and Windows.
Mac
Run the below given command by opening the terminal.
sudo /Applications/Google Chrome.app/Contents/MacOS/Google Chrome –remote-debugging-port=9222
Windows
Use the below given command after opening the Command Prompt.
start chrome.exe –remote-debugging-port=9222
Read Also:
Chrome Developer Tools For Macbook
Step by step instructions to UseNow remote debugging feature is enabled and thus you can browse any site when your chrome is opened already.
Say for showing you an example here we opened Geekeasier.com .After that we move onto Chrome DevTools app window and refresh this list.
Chrome Developer Tools Not Showing Mac
You will see that the Geekeasier.com link is listed like the image given below.
What to do next?
Click on 'Go'. This will direct you to a new window. So you are done with it . Well , Chrome DevTools app is already running guys .Like the image given below you would get one alike when you click on 'Inspect Element 'on your chrome browser.
Hereafter you can enjoy using Chrome DevTools app as like as the same way using DevTools on Chrome natively.You can now check the DOM component, troubleshoot JavaScript, and work with Console and more!
Chrome For Developers Download
So i guess you got the deepest and clear idea about How to Use Chrome DevTools App for Remote Debugging .
Chrome Developer Tools Disabled Mac
So happy Remote Debugging with Chrome DevTools App all web developers 🙂 🙂 🙂
