{"id":239177,"date":"2021-04-28T15:30:38","date_gmt":"2021-04-28T12:30:38","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-turn-on-the-develop-menu-in-safari-on-mac\/"},"modified":"2021-04-28T15:30:38","modified_gmt":"2021-04-28T12:30:38","slug":"how-to-turn-on-the-develop-menu-in-safari-on-mac","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-turn-on-the-develop-menu-in-safari-on-mac\/","title":{"rendered":"#How to Turn on the Develop Menu in Safari on Mac"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a287979ae1b0\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a287979ae1b0\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-turn-on-the-develop-menu-in-safari-on-mac\/#How_to_Enable_the_Develop_Menu_in_Safari_on_Mac\" >How to Enable the Develop Menu in Safari on Mac<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-turn-on-the-develop-menu-in-safari-on-mac\/#How_to_View_Page_Source_in_Safari_on_Mac\" >How to View Page Source in Safari on Mac<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Turn on the Develop Menu in Safari on Mac&#8221;<\/strong><\/p>\n<div>\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage alignnone size-full wp-image-721565\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/apple-safari-logo-icon.jpg?width=1200&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Apple Safari app icon\" width=\"1200\" height=\"555\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>When you right-click on any web page in Safari on Mac, it doesn\u2019t reveal the Show Page Source and Inspect Element buttons. To see these, you need to enable the Develop menu\u2014we\u2019ll show you how to do that.<\/p>\n<p>Once you\u2019ve enabled the Develop menu, right-clicking a blank space on any website will reveal the Inspect Element and Show Page Source buttons. These allow you to take a look at the source code of any website, which is useful for things like <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">download<\/a>ing images from websites and debugging code or finding out what it looks like behind any site (for website designers).<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"How_to_Enable_the_Develop_Menu_in_Safari_on_Mac\"><\/span>How to Enable the Develop Menu in Safari on Mac<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You can easily turn on the Develop menu in Safari by following a couple of steps. Open Safari on your Mac and click the \u201cSafari\u201d button in the menu bar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721418\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-button-menu-bar.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Click Safari in the menu bar\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Next, select \u201cPreferences.\u201d Alternatively, you can use the keyboard shortcut Command+, (comma). This will also open up Safari preferences.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721419\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-preferences-menu.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Click Preferences\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Go to the \u201cAdvanced\u201d tab.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721420\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-preferences-advanced-tab.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Click Advanced\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Check the box for \u201cShow Develop Menu in Menu Bar.\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721421\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-enable-show-develop-menu.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Enable Show Develop menu in menu bar\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Now the Develop menu will appear between Bookmarks and Window at the top.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721422\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-show-develop-menu.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"The Develop menu in the menu bar\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Apart from being able to view the page source, this will allow you to access developer-focused features, such as disabling JavaScript on any website.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"How_to_View_Page_Source_in_Safari_on_Mac\"><\/span>How to View Page Source in Safari on Mac<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Once you\u2019ve enabled the Develop menu, there are a couple of ways to view the page source in Safari.<\/p>\n<p>Open any website in Safari and right-click the blank space on the page. Now, select \u201cShow Page Source.\u201d You can also get to this menu by using the keyboard shortcut Option+Command+u.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721423\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-show-page-source-button.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Click Show Page Source\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>If you\u2019re looking for images or other <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">media<\/a> elements from any web page, Safari makes it easy to find these. In the left-hand pane, you will see various folders such as Images, Fonts, etc. Click the \u201cImages\u201d folder to quickly find the photos that you need.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721427\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-page-source-images-tab.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Click the Images folder to view all images from any webpage\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>After selecting an image, you can view its details easily by opening up the details sidebar. The button to open this is located at the top-right of the console, just below the gear icon. You can also open this with the shortcut Option+Command+0.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721429\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-details-sidebar-button.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Open the details sidebar\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Click \u201cResource\u201d at the top of the details sidebar to view details, such as the size of the image and its full URL.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721430\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-resource-tab-image-details.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Click the Resources tab\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You can change the position of the page source console easily, too. There are two buttons at the top-left of this console, right next to the X button. Click the rectangle icon to move the console to a different side within the browser window.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721426\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-move-page-source-console-side.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Click the rectangle icon to change the position of the page source console\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>If you\u2019d like to open the page source console in a separate window, you can click the two-rectangles icon. This will detach the console and open it in a separate window.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721424\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-page-source-console-new-window.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Click the two rectangles icon to open the page source in a new window\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>To check out the code for any specific element on the page, you can right-click that element and select \u201cInspect Element.\u201d This will take you\u00a0directly to the code for the element that you selected.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-721428\" src=\"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/safari-inspect-element-button.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Click Inspect Element\" width=\"500\" height=\"231\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<hr\/>\n<p>Whenever you\u2019re done looking at the code, click the X button to close the page source console and return to browsing on Safari. You can also check out how to view a website\u2019s page source in Google Chrome\u00a0here.<\/p>\n<p><strong>RELATED:<\/strong> <strong><em>How to View the HTML Source in Google Chrome<\/em><\/strong><\/p>\n<\/div>\n<p><script>\n setTimeout(function(){\n  !function(f,b,e,v,n,t,s)\n  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?\n  n.callMethod.apply(n,arguments):n.queue.push(arguments)};\n  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';\n  n.queue=[];t=b.createElement(e);t.async=!0;\n  t.src=v;s=b.getElementsByTagName(e)[0];\n  s.parentNode.insertBefore(t,s) } (window, document,'script',\n  'https:\/\/connect.facebook.net\/en_US\/fbevents.js');\n   fbq('init', '335401813750447');\n   fbq('track', 'PageView');\n  },3000);\n<\/script><\/p>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.howtogeek.com\/721416\/how-to-turn-on-the-develop-menu-in-safari-on-mac\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Turn on the Develop Menu in Safari on Mac&#8221; When you right-click on any web page in Safari on Mac, it doesn\u2019t reveal the Show Page Source and Inspect Element buttons. To see these, you need to enable the Develop menu\u2014we\u2019ll show you how to do that. Once you\u2019ve enabled the Develop menu,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":239178,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.howtogeek.com\/wp-content\/uploads\/2021\/03\/apple-safari-logo-icon.jpg?height=200p&trim=2,2,2,2","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-239177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/239177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=239177"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/239177\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/239178"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=239177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=239177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=239177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}