{"id":275635,"date":"2018-08-29T16:07:26","date_gmt":"2018-08-29T23:07:26","guid":{"rendered":"http:\/\/css-tricks.com\/?p=275635"},"modified":"2018-08-29T16:07:26","modified_gmt":"2018-08-29T23:07:26","slug":"view-source-in-devtools","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/view-source-in-devtools\/","title":{"rendered":"“View Source” in DevTools"},"content":{"rendered":"

When the conversation about the value of “View Source”<\/a> rolls around, the #1 response I hear is along these lines:<\/p>\n

\nNo way, Jose! I use View Source all the time! It’s very useful when you want to look at the raw HTML, not the DOM.\n<\/p><\/blockquote>\n

Yes, that is useful, and yes, there is a difference<\/a>. But just because you are looking at DevTools doesn’t mean the DOM is the only thing you can see.<\/p>\n

<\/p>\n

\"\"
This is Chrome DevTools.<\/figcaption><\/figure>\n
\"\"
Safari has a Resources tab<\/figcaption><\/figure>\n

There is also a Network tab in DevTools for every browser. That’s where you find a way to look at the document. <\/p>\n

\"\"
Firefox’s Network tab<\/figcaption><\/figure>\n

So, if your concern about losing View Source is that you’d have no possible way to see the document instead of just the DOM, that’s just not true. You can rest assured that you have the same affordance in DevTools.<\/p>\n

If your concern is that it’s handier to see the source as a full-window tab with an easy keyboard shortcut, then sure, OK, that’s a reasonable argument to make.<\/p>\n","protected":false},"excerpt":{"rendered":"

When the conversation about the value of “View Source” rolls around, the #1 response I hear is along these lines: […]<\/p>\n","protected":false},"author":3,"featured_media":275654,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"We can View Source in DevTools just like we can the traditional way.","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1144],"class_list":["post-275635","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-devtools"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/devtools-source.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":377264,"url":"https:\/\/css-tricks.com\/some-cross-browser-devtools-features-you-might-not-know\/","url_meta":{"origin":275635,"position":0},"title":"Some Cross-Browser DevTools Features You Might Not Know","author":"Pankaj Parashar","date":"March 22, 2023","format":false,"excerpt":"I spend a lot of time in DevTools, and I\u2019m sure you do too. Sometimes I even bounce between them, especially when I\u2019m debugging cross-browser issues. DevTools is a lot like browsers themselves \u2014 not all of the features in one browser\u2019s DevTools will be the same or supported in\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674721838803_Screenshot2023-01-26at14.00.01.png?fit=1200%2C862&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674721838803_Screenshot2023-01-26at14.00.01.png?fit=1200%2C862&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674721838803_Screenshot2023-01-26at14.00.01.png?fit=1200%2C862&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674721838803_Screenshot2023-01-26at14.00.01.png?fit=1200%2C862&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674721838803_Screenshot2023-01-26at14.00.01.png?fit=1200%2C862&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":317687,"url":"https:\/\/css-tricks.com\/whats-new-in-devtools-2020\/","url_meta":{"origin":275635,"position":1},"title":"A Look at What’s New in Chrome DevTools in 2020","author":"Umar Hansa","date":"July 31, 2020","format":false,"excerpt":"I\u2019m excited to share some of the newer features in Chrome DevTools with you. There\u2019s a brief introduction below, and then we\u2019ll cover many of the new DevTools features. We\u2019ll also look at what\u2019s happening in some other browsers. I keep up with this stuff, as I create Dev Tips,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/chrome-devtools.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":336536,"url":"https:\/\/css-tricks.com\/axe-devtools-pro\/","url_meta":{"origin":275635,"position":2},"title":"axe DevTools Pro","author":"Chris Coyier","date":"April 7, 2021","format":false,"excerpt":"I'm going to try to show you some things I think are useful and important about axe\u2122 DevTools and use as few words as possible. axe DevTools includes a browser extension which you need no special expertise to use. You install it from the extension directories like any other extension.\u2026","rel":"","context":"In "Sponsored"","block_context":{"text":"Sponsored","link":"https:\/\/css-tricks.com\/category\/sponsored\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/axeDevTools_css-tricks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/axeDevTools_css-tricks.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/axeDevTools_css-tricks.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/axeDevTools_css-tricks.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/axeDevTools_css-tricks.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":376659,"url":"https:\/\/css-tricks.com\/the-truth-about-css-selector-performance\/","url_meta":{"origin":275635,"position":3},"title":"The truth about CSS selector performance","author":"Geoff Graham","date":"February 7, 2023","format":false,"excerpt":"Geez, leave it to Patrick Brosset to talk CSS performance in the most approachable and practical way possible. Not that CSS is always what's gunking up the speed, or even the lowest hanging fruit when it comes to improving performance. But if you're looking for gains on the CSS side\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/edge-devtools-selector-stats.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/edge-devtools-selector-stats.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/edge-devtools-selector-stats.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/edge-devtools-selector-stats.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/edge-devtools-selector-stats.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":320854,"url":"https:\/\/css-tricks.com\/defining-view-source\/","url_meta":{"origin":275635,"position":4},"title":"Defining “View Source”","author":"Chris Coyier","date":"September 10, 2020","format":false,"excerpt":"Last time there was a little flurry of activity around the concept of \"View Source,\" I did get the sense that not everyone was on the same page about what that even means. Jim Nielsen: First, when we talk about \u201cView Source\u201d what precisely are we talking about? I think\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/complex-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/complex-code.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/complex-code.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/complex-code.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/complex-code.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":251777,"url":"https:\/\/css-tricks.com\/set-timed-debugger-web-inspect-hard-grab-elements\/","url_meta":{"origin":275635,"position":5},"title":"Set a Timed Debugger To Web Inspect Hard-To-Grab Elements","author":"Chris Coyier","date":"February 22, 2017","format":false,"excerpt":"Triggering a debugger; statement at just the right moment can help you select a DOM element that is really hard (or impossible) to get selected in DevTools. You can do that directly in your code, or, through a setTimeout right in the console, so you can get the DOM just\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=275635"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275635\/revisions"}],"predecessor-version":[{"id":275653,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275635\/revisions\/275653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/275654"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=275635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=275635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=275635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}