{"id":8467,"date":"2011-06-15T03:38:40","date_gmt":"2011-06-15T07:38:40","guid":{"rendered":"http:\/\/info.template-help.com\/?p=8467"},"modified":"2015-10-28T06:33:15","modified_gmt":"2015-10-28T10:33:15","slug":"developer-tools","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/developer-tools.html","title":{"rendered":"Developer Tools"},"content":{"rendered":"<p>While  working with website templates you may often need to modify the HTML markup,  CSS styles or JavaScript files. Usually to modify some elements on the page you  should browse through the files and search for necessary line. <\/p>\r\n<p>This post  will show you how to make the process easier and clear using the browser  developer tools. <\/p>\r\n<p>The browser  developer tools can be used to:<\/p>\r\n<ul>\r\n  <li>Inspect  the HTML markup<\/li>\r\n  <li>Check  and edit the CSS element styles<\/li>\r\n  <li>Trace  the JavaScript and Network errors etc<\/li>\r\n<\/ul>\r\n<p>&nbsp;<\/p>\r\n\r\n<h3>Mozilla Firefox<\/h3>\r\n\r\n<p>Mozilla  Firefox browser doesn\u2019t have any developer tools included so you need to  download and install the <a href=\"http:\/\/getfirebug.com\/\">Firebug plugin <\/a><br>\r\n  It\u2019s the  most powerful and easy to use developer tool so we highly recommend you to use  it. <\/p>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/06\/firebug-intro-1.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/06\/firebug-intro-1-300x67.jpg\" alt=\"\" title=\"firebug-intro-1\" width=\"300\" height=\"67\" class=\"aligncenter size-medium wp-image-8472\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/06\/firebug-intro-1-300x67.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/06\/firebug-intro-1-150x34.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/06\/firebug-intro-1.jpg 998w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<p><a href=\"\/help\/firebug-mozilla-firefox-plugin.html\" target=\"blank\">Learn More&#8230;<\/a><\/p>\r\n\r\n<p>&nbsp;<\/p>\r\n\r\n<h3>Microsoft Internet  Explorer<\/h3>\r\n\r\n<p>The MSIE  browser has the included developer tool that could be enabled from the<strong> Tools &gt; Developer Tool<\/strong> menu or  pressing the <strong>F12<\/strong> hotkey. <\/p>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/06\/ie-intro-1.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/06\/ie-intro-1-300x72.jpg\" alt=\"\" title=\"ie-intro-1\" width=\"300\" height=\"72\" class=\"aligncenter size-medium wp-image-8473\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/06\/ie-intro-1-300x72.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/06\/ie-intro-1.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<p>&nbsp;<\/p>\r\n\r\n<h3>Opera<\/h3>\r\n<p>Opera  browser developer tool can be enabled with the right click on the screen and  selecting <strong>Inspect Element<\/strong> from the  drop down menu. <\/p>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/06\/opera-intro-1.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/06\/opera-intro-1-300x82.jpg\" alt=\"\" title=\"opera-intro-1\" width=\"300\" height=\"82\" class=\"aligncenter size-medium wp-image-8470\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/06\/opera-intro-1-300x82.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/06\/opera-intro-1.jpg 997w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<p>&nbsp;<\/p>\r\n\r\n<h3>Google Chrome<\/h3>\r\n<p>The Google  Chrome browser developer tool can be enabled the same way as in the Opera  browser \u2013 right clicking on the screen and selecting <strong>Inspect Element<\/strong> from the drop down menu. <\/p>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/06\/chrome-intro-1.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/06\/chrome-intro-1-300x72.jpg\" alt=\"\" title=\"chrome-intro-1\" width=\"300\" height=\"72\" class=\"aligncenter size-medium wp-image-8471\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/06\/chrome-intro-1-300x72.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/06\/chrome-intro-1.jpg 997w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<p>&nbsp;<\/p>\r\n\r\n<p>Learn <a href=\"\/help\/how-to-use-google-chrome-device-emulation-feature.html\">how to use Google Chrome Device Emulation feature<\/a>.<\/p>\r\n\r\n<h3>Safari<\/h3>\r\n\r\n<p>The developer tool in Safari is disabled by default. So if you want to enable it  go to <strong>Edit > Preferences > Advanced<\/strong> and enable the <strong>Show Develop menu in menu bar<\/strong>. Then you can open the developer tool window right clicking at the website element  and selecting <strong>Inspect Element<\/strong>.   <\/p>\r\n\r\n<a href=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/06\/safari-intro-1.jpg\"><img loading=\"lazy\" src=\"http:\/\/info.template-help.com\/wp-content\/uploads\/2011\/06\/safari-intro-1-300x88.jpg\" alt=\"\" title=\"safari-intro-1\" width=\"300\" height=\"88\" class=\"aligncenter size-medium wp-image-8540\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/06\/safari-intro-1-300x88.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/06\/safari-intro-1.jpg 1021w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>","protected":false},"excerpt":{"rendered":"<p>While working with website templates you may often need to modify the HTML markup, CSS styles or JavaScript files. Usually to modify some elements on the page you should browse through the files and search for necessary line. This post will show you how to make the process easier and clear using the browser developer [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[938,937],"tags":[514,942,691,939,2411,941,807,940],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/8467"}],"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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=8467"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/8467\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=8467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=8467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=8467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}