{"id":76628,"date":"2016-10-10T09:55:30","date_gmt":"2016-10-10T13:55:30","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=76628"},"modified":"2016-12-02T09:11:13","modified_gmt":"2016-12-02T14:11:13","slug":"use-google-chrome-web-inspector","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/use-google-chrome-web-inspector.html","title":{"rendered":"How to use Google Chrome Web Inspector"},"content":{"rendered":"<p>This tutorial is going to show you how to work with Google Chrome Web Inspector.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/uXYjC0zjb9E\"><\/iframe>\r\n<\/div>\r\n<p>You may already know about FireBug, a Mozilla Firefox plugin. One of our video tutorials shows <a href=\"\/help\/firebug-mozilla-firefox-plugin.html\" target=\"_blank\">how to work with FireBug<\/a>. In this guidance we are going to show you how to work with the similar tool in Google Chrome.<\/p>\r\n<p>To open Google Chrome Web Inspector you can do the following:<\/p>\r\n<ol>\r\n\t<li><p>From the Chrome menu:<\/p>\r\n\t\t<ul class=\"list\">\r\n\t\t\t<li><p> Select Chrome menu button at the top right corner<\/p><\/li>\r\n\t\t\t<li>\r\n\t\t\t<p>Choose <strong>More Tools<\/strong> > <strong>Tools<\/strong> > <strong>Developer Tools<\/strong> option:\r\n\t\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_1-300x260.jpg\" alt=\"How_to_use_Google_Chrome_Web_Inspector_1\" width=\"300\" height=\"260\" class=\"alignnone size-medium wp-image-76630\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_1-300x260.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_1-150x130.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_1.jpg 640w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\t\t\r\n\t\t\t<\/li>\t\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t<p>Right click the element you want to inspect and select <strong>Inspect<\/strong>:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_2-300x112.jpg\" alt=\"How_to_use_Google_Chrome_Web_Inspector_2\" width=\"300\" height=\"112\" class=\"alignnone size-medium wp-image-76631\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_2-300x112.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_2-150x56.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_2-768x287.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_2-1024x382.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_2.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\r\n\t<\/li>\r\n\t<li><p>Using hot keys: <strong>Ctrl+Shift+I<\/strong> (or <strong>Cmd+Opt+I<\/strong> on Mac). Alternatively, you may press <strong>F12<\/strong> on your keyboard.<\/p><\/li>\r\n<\/ol>\r\n<p>This tool has several options available:<\/p>\r\n<h3 class=\"custom\">Editing CSS styles<\/h3>\r\n<p><strong>Element<\/strong> tab allows you to edit CSS in live mode. It means that you may preview change you do in CSS on your site before making it on your site directly.<\/p>\r\n<p>Here you can see what styles are assigned to certain elements of your site.<\/p>\r\n<ol>\r\n\t<li>\r\n\t<p>Open your Chrome developer tool using one of the methods described earlier.<\/p><\/li>\r\n\t<li><p>On the right side of the panel you will see website CSS styles. You may edit CSS code here to see how they will be reflecting on your site.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_3-300x154.jpg\" alt=\"How_to_use_Google_Chrome_Web_Inspector_3\" width=\"300\" height=\"154\" class=\"alignnone size-medium wp-image-76632\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_3-300x154.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_3-150x77.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_3-768x395.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_3-1024x526.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_3.jpg 1275w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\r\n\t\r\n\t<p class=\"attention\">Note! The changes made in developer tool won&#8217;t be saved. You can only see how your changes will affect your browser. To save the changes please edit the .HTML and .CSS files.<\/p><\/li>\r\n<\/ol>\r\n<h3 class=\"custom\">Inspecting the HTML markup<\/h3>\r\n<p>To access HTML code in your browser open your Google Chrome developer tool from your browser menu or using inspect elements tool.<\/p>\r\n<p>On the left wide section you will see HTML code used on your page.<\/p>\r\n<p>Once you select a certain element on your site you will see the corresponding HTML code highlighted in the browser. Alternatively, you can click on HTML elements directly in the Inspector, and it will highlight the element on the page.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_4-300x150.jpg\" alt=\"How_to_use_Google_Chrome_Web_Inspector_4\" width=\"300\" height=\"150\" class=\"alignnone size-medium wp-image-76633\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_4-300x150.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_4-150x75.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_4-768x383.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_4-1024x510.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_4.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<h3 class=\"custom\">Working with the Console<\/h3>\r\n<p>The Console helps to debug your webpage. To open the Console page:<\/p>\r\n<ol>\r\n\t<li>\r\n\t<p>Use <strong>CRTL+Shift+J<\/strong> hotkeys on Windows (or <strong>Cmd+Opt+J<\/strong> on Mac).<\/p><\/li>\r\n\t<li>\r\n\t<p>Or click <strong>Console<\/strong> button in already opened developers tool.<\/p><\/li>\r\n<\/ol>\r\n<p>When Console is opened you will see all the errors that are on your site.<\/p> \r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_5-300x155.jpg\" alt=\"How_to_use_Google_Chrome_Web_Inspector_5\" width=\"300\" height=\"155\" class=\"alignnone size-medium wp-image-76634\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_5-300x155.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_5-150x77.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_5-768x396.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_5-1024x528.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_5.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<p>This tool is extremely useful if you have some issues with the site. Console will show you all the website errors and some clues on how to solve them.<\/p>\r\n<p>You can also use the Net tab to see the causing errors files. The errors are marked with red.<\/p>\r\n<p>To learn more about Google Chrome Console you can check default <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/debug\/console\/console-ui?hl=en\" target=\"_blank\">Google Chrome site<\/a>.<\/p>\r\n<h3 class=\"custom\">Using Google Chrome Device Emulation feature<\/h3>\r\n<p>This feature will help you to test your responsive designs by emulating different screen sizes and resolutions.<\/p>\r\n<p> To access this feature, make sure that your developer tool is opened. Click <strong>Toggle Device Toolbar<\/strong> button (or use <strong>CTRL+Shift+M<\/strong> hot-keys):<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_6.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_6-300x144.jpg\" alt=\"How_to_use_Google_Chrome_Web_Inspector_6\" width=\"300\" height=\"144\" class=\"alignnone size-medium wp-image-76629\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_6-300x144.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_6-150x72.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_6-768x370.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_6-1024x493.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/10\/How_to_use_Google_Chrome_Web_Inspector_6.jpg 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<p>Once feature is enabled you can select mobile device you wish to check how your site looks like on certain resolution. <\/p>\r\n<p>You can check our video tutorial on <a href=\"\/help\/how-to-use-google-chrome-device-emulation-feature.html\" target=\"_blank\">how to use Google Chrome Device Emulation feature<\/a> for more details.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=uXYjC0zjb9E?width=1280&amp;height=720\" rel=\"prettyPhoto\">How to use Google Chrome Web Inspector<\/a>\r\n<p>Also, take the time to review the selection of brand new <a href=\"https:\/\/www.templatemonster.com\/website-templates.php\" target=\"_blank\">html5 templates for websites.<\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial is going to show you how to work with Google Chrome Web Inspector.<\/p>\n","protected":false},"author":55,"featured_media":76635,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[938],"tags":[2103,2400,2489,2490,2491],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/76628"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=76628"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/76628\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/76635"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=76628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=76628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=76628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}