{"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: No 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. Yes, that is useful, and yes, there is a difference. […]<\/p>\n","protected":false},"author":3,"featured_media":275654,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"We can View Source in DevTools just like we can the traditional way.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1144],"jetpack_publicize_connections":[],"acf":[],"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":251777,"url":"https:\/\/css-tricks.com\/set-timed-debugger-web-inspect-hard-grab-elements\/","url_meta":{"origin":275635,"position":0},"title":"Set a Timed Debugger To Web Inspect Hard-To-Grab Elements","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 "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":210431,"url":"https:\/\/css-tricks.com\/throttling-the-network\/","url_meta":{"origin":275635,"position":1},"title":"Throttling the Network in Chrome DevTools","date":"November 3, 2015","format":false,"excerpt":"The Network tab in Chrome DevTools has an option to faux throttle your network, so you can experience what your users might experience visiting your website on 3G, 2G and GPRS connections. Besides the obvious, it's also useful for visualising how fonts load. Here\u2019s how to do it in Chrome\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":281581,"url":"https:\/\/css-tricks.com\/firefox-devtools-webconsole-2018-retrospective\/","url_meta":{"origin":275635,"position":2},"title":"Firefox DevTools WebConsole 2018 retrospective","date":"January 21, 2019","format":false,"excerpt":"Here\u2019s a wonderful post by Nicolas Chevobbe on what the Firefox DevTools team was up to last year. What strikes me is how many improvements they shipped \u2014 from big visual design improvements to tiny usability fixes that help us make sure our code works as we expect it to\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/firefox-devtools-redesign.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":294387,"url":"https:\/\/css-tricks.com\/can-you-view-print-stylesheets-applied-directly-in-the-browser\/","url_meta":{"origin":275635,"position":3},"title":"Can you view print stylesheets applied directly in the browser?","date":"August 19, 2019","format":false,"excerpt":"Yep. Let's take a look at how to do it in different browsers. Although note the date of this blog post. This stuff tends to change over time, so if anything here is wrong, let us know and we can update it. In Firefox... It's a little button in DevTools.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/print-browser.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":270357,"url":"https:\/\/css-tricks.com\/inspecting-animations-in-devtools\/","url_meta":{"origin":275635,"position":4},"title":"Inspecting Animations in DevTools","date":"May 4, 2018","format":false,"excerpt":"I stumbled upon the Animation panel in Chrome\u2019s DevTools the other day and almost jumped out of my seat with pure joy. Not only was I completely unaware that such a thing exists, but it was better than what I could\u2019ve hoped: it lets you control and manipulate CSS animations\u2026","rel":"","context":"In "Article"","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},"classes":[]},{"id":377264,"url":"https:\/\/css-tricks.com\/some-cross-browser-devtools-features-you-might-not-know\/","url_meta":{"origin":275635,"position":5},"title":"Some Cross-Browser DevTools Features You Might Not Know","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 "Article"","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},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275635"}],"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}]}}