#[1]text/plain » Feed [2]text/plain » Comments Feed [3]text/plain » Demystifying Browsers Comments Feed [4]App-to-Web Communication: Launching Web Apps [5]alternate [6]alternate [7]text/plain [8]WordPress.com HideMenu Pages * [9]About [10]text/plain ericlaw talks about the web and software in general 2020-02-09 Demystifying Browsers I started building browser extensions more than 22 years ago, and I started building browsers directly just over 16 years ago. At this point, I think it’s fair to say that I’m entering the grizzled veteran phase of my career. With the Edge team [11]continuing to grow with bright young minds from college and industry, I’m increasingly often asked “Where do I learn about browsers?” and I haven’t had a ready answer for that question. This post aims to answer it. First, a few prerequisites for developing expertise in browsers: 1. Curiosity. While browsers are more complicated than ever, there are also better resources than ever to learn how they work. All major browsers are now based on open-source code, and if you’re curious, you no longer need to [12]join a secret priesthood to discover how they operate under the hood. 2. Willingness to Experiment. Considering how complex browsers are (and because they’re so diverse, across platforms, maker, and version), it’s often easiest to definitively answer questions about how browsers work by trying things, rather than reading an explainer (possibly outdated or a map that doesn’t match the terrain) or reading the code (often complex and potentially misleading). Build test cases and try them in each browser to see what happens. When you encounter [13]surprising [14]behavior, let your curiosity guide you into figuring it out. Browsers contain no magic, but plenty of [15]butterfly effects. 3. Doggedness. I’ve been doing this for half of my life, and I’m still learning daily. While historical knowledge will serve you well, things are changing in this space every day, and keeping up is an endless challenge. And it’s often fun. Now, how do you apply these prerequisites and grow to become a master of browsers? Read on. Fundamental Understanding Over the years, a variety of broad resources have been developed that will give you a good foundation in the fundamentals of how browsers work. Taking advantage of these will help you more effectively explore and learn on your own. * First, I recommend reading [16]the Chrome Comic Book. This short, 38 page comic book from legend Scott McCloud was published alongside the first version of Google Chrome back in 2008. It clearly and simply explains many of the core concepts behind modern browsers as application platforms. * HTML5Rocks has a great introduction into [17]How Browsers Work. This is a lengthy and detailed introduction into how browsers turn HTML and CSS into what you see on the screen. Read this article and you’ll understand more about this topic than 90% of web developers. * The folks at Google have created a fantastic four-part illustrated series about how modern browsers work: [18]Inside look at modern web browsers. [19]Navigation, [20]the Rendering Engine and [21]Input and Compositing as a part of their [22]Web Fundamentals site. * Mozilla wrote a fantastic [23]cartoon introduction to WebAssembly, explaining the basics behind this new technology; there’s tons of other invaluable content on [24]Mozilla Hacks. * [25]The Chromium Chronicle is a monthly series geared specifically to the Chromium developers who build the browser. * The [26]Chrome University [27]2[28]0[29]1[30]9 (and [31]2018) talks on YouTube are amazing. * Web Developers should check out [32]Web.Dev, a great source of articles on building fast and secure websites. Books If you prefer to learn from books, I can recommend a few. Sadly, there are few on browsers themselves (largely because they tend to evolve too quickly), but there are good books on web technologies. * [33]High Performance Browser Networking can be [34]read online for free. * [35]HTTP2 in Action explains this important new protocol. * [36]The Tangled Web explains the web security model. * [37]Progressive Web Apps explores the technologies behind this new web application paradigm. Tools One of the best ways to examine what’s going on with browsers is to just use tools to watch what’s going on as you use your favorite websites. * Built-in DevTools (just hit F12!) – They’re amazingly powerful. I don’t know of a great tutorial, but there are likely some [38]on YouTube. * [39]Telerik Fiddler – See what requests hit the network and what they contain. * [40]The VisBug Chrome Extension – Easily manipulate any page layout, directly in your browser. Use the Source, Leia The fact that all of the major browsers are built atop open-source projects is a wonderful thing. No longer do you need to be a reverse-engineering ninja with a low-level debugger to figure out how things are meant to work (although sometimes such approaches can still be super-valuable). Source code locations: * Firefox‘s code can be searched via [41]Searchfox or [42]DXR. * Webkit source can be found [43]here, although I typically just search on a [44]mirror on GitHub. * Chromium‘s code is found in the [45]Code Search tool ([46]future version). * Microsoft Edge‘s code can be downloaded in giant (4gb) ZIP files from [47]here. Sadly, online search is not yet available. * [48]Brave‘s changes to Chromium can be found on GitHub. * The [49]HTML5 Specification is often useful. Navigating the Code While simply perusing a browser’s source code might give you a good feel for the project, browsers tend to be enormous. Chromium is over 10 million lines of code, for example. If you need to find something in particular, one often effective way to find it easily is to search for a string shown in the browser UI near the feature of interest. (Or, if you’re searching for a DOM function name or HTML attribute name, try searching for that.) By way of example, today I encountered an unexpected behavior in the handling of the “Go to ” command on Chromium’s context menu: So, to find the code that implements this feature, I first try searching for that string: …but there are a gazillion hits, which makes it hard to find what I need. So I instead search for a string that’s elsewhere in the context menu, and find only one hit in the Chromium “grd” (resources) file: When I go look at that grd file, I quickly find the identifier I’m really looking for just below my search result: So, we now know that we’re looking for usages of IDS_CONTENT_CONTEXT_GOTOURL, probably in a .CC file, and [50]we find that almost immediately: From here, we see that the menu item has the command identifier IDC_CONTENT_CONTEXT_GOTOURL, which we can then continue to chase down through the source until we find the code [51]that handles the command. That command makes use of a variable selection_navigation_url_, which is [52]filled elsewhere by some pretty complicated logic. After you gain experience in the Chromium code, you might learn “Oh, yeah, all of the context menu stuff is easy to find, it’s in the renderer_context_menu directory” and limit your searches to that area, but after four years of working on Chrome, I still usually start my searches broadly. Look at their Bugs All browsers except Microsoft Edge have a public bug tracker where you can search for known issues and file new bugs if you encounter them. * Firefox – [53]Firefox Bugzilla * Webkit – [54]WebKit Bugzilla * Chromium – [55]CRBug * Microsoft Edge‘s – Platform bugs that are inherited from Chromium are tracked using [56]CRBug. Sadly, at present there is no public tracker for bugs that reproduce only in Edge. Bugs reported by the “Feedback” button are tracked internally by Microsoft. * Brave – [57]on GitHub * HTML5 Specification – [58]on GitHub Blogs to Read * [59]This One – I write mostly about browsers. * My (archived) [60]IEInternals – I started writing this blog because it was the only reliable way for me to find my notes from investigations and troubleshooting years later. * [61]Cloudflare – Cloudflare is a $5B company whose primary product is their amazing blog. I understand they also run a CDN on the side to generate interesting topics for their blog to talk about. * [62]Nasko Oskov’s – Nasko is an engineer on the Chrome Security team and writes mostly about security topics. * [63]Chris Palmer’s – Chris is an engineer on the Chrome Security team and writes about secure design. * [64]Adam Langley’s – Google’s expert cryptographer * [65]Bruce Dawson’s – Bruce is a Chrome Engineer who posts lots of interesting information about debugging and performance troubleshooting, especially on Windows. * [66]Anne van Kesteren’s – Anne works on the HTML5 spec. * [67]Mark Nottingham’s – Mark co-chairs the HTTP and QUIC working groups People to Follow * Lin Clark ([68]@linclark) draws [69]@codecartoons. These are my favorite thing in the universe. * Similarly, [70]@kosamari provides some of the clearest explanations of complicated browser topics. * The [71]@intenttoship bot publishes notices of browsers’ intention to launch new features * Other Chrome folks often tweet interesting things: [72]Mike West, [73]Alex Russell, [74]Paul Irish, [75]Jake Archibald, [76]Rick Byers, [77]Pete LePage, [78]Surma, [79]Jochen Eisinger, [80]Jeffrey Yasskin, [81]Yoav Weiss, [82]Chris Wilson, [83]Domenic Denicola, [84]Paul Kinlan, [85]Adrienne Porter Felt, [86]Emily Schechter, [87]Emily Stark, [88]Parisa Tabriz, [89]Nasko Oskov, [90]Simeon, [91]Ryan Sleevi, [92]Justin Schuh, [93]Rowan Merewood, [94]Peter Beverloo, [95]Dominick Ng, [96]Asanka Herath, [97]Darin Fisher, [98]Andrew Whalley, [99]Dion Almaer, [100]Mathias Bynens, [101]David Benjamin, [102]Bruce Dawson, [103]Addy Osmani, [104]Ilya Grigorik, [105]Mathieu Perreault, [106]Varun Khaneja, [107]Chris Thompson, [108]Ian Kilpatrick, [109]Avi Drissman * [110]PPK, [111]Michal Špaček, [112]François Remy, [113]Melanie Richards, [114]Tony Ross, [115]Mark Nottingham, [116]Alex Wykoff, [117]Mike Taylor, [118]Adam Langley, [119]Nic Jansma, [120]John Wilander, [121]othermaciej, [122]pes, [123]Artur Janc, [124]Ivan Fratric, [125]Lucas Pardoe, [126]Anne van Kesteren, [127]Aaron Gustafson, [128]Allen Wirfs-Brock, [129]J.C., [130]Adam Roach, [131]Zouhir, [132]Kamila Hasanbega, [133]Matt Holt, [134]John Graham-Cumming, [135]Jun Kokatsu, [136]Patrick Kettner, [137]Eiji Kitamura, [138]Jonathan Kingston, [139]Sampson, [140]Brian Clifton, [141]Brian Bondy, [142]Owen Campbell-Moore, [143]Natalie Silvanovich, [144]Alex Ainslie, [145]Mike Conley, [146]Tanvi, [147]Malte Ubl, [148]Chris Heilmann, [149]Monica Dinculescu, [150]Eric Mill, [151]Evan J, [152]eae, [153]Scott Helme, [154]April King, [155]Matthew Prince, [156]Yan, [157]Patrick Donahue, [158]Justin, [159]Jyrki Alakuijala, [160]James Forshaw, [161]Tim Kadlec, [162]Kyle Pflug, [163]Sam Sneddon, [164]David Storey, [165]Chris Love, [166]Travis Leithead, [167]Tammy Everts, [168]Greg Whitworth, [169]Sean Lyndersay, [170]Daniel Stenberg, [171]L. David Baron, [172]TJ VanToll, [173]John Jansen, [174]Patrick McManus, [175]Giorgio Maone, [176]Ben Adida, [177]Ivan Ristic, [178]Patrick Meenan, [179]Steve Souders, [180]Jungkee Song, [181]Dane Knecht, [182]Scott Low * [183]EdgeDevTools, [184]ChromeDevTools, [185]WebKit, [186]WebCompat * [187]Me :) I’ve doubtless forgotten some, [188]see who I follow. Extra Resources * [189]CanIUse.com often has useful information. * [190]ChromeStatus and particularly their “[191]upcoming changes” schedule. * Chrome’s [192]OmahaProxy and [193]ChromiumDash. * [194]Chromium Design Docs – Some are badly outdated, but all of them are interesting. * [195]SSLLabs.com Browsers are hugely complicated beasts, and tons of fun. If the resources above leave you feeling both overwhelmed and excited, maybe you should become a browser builder. Want to change the world? [196]Come join the new Microsoft Edge team today! -Eric PS: Have I forgotten or overlooked a great resource for folks entering our field? Please leave me a comment! Share this: * [197]Twitter * [198]Facebook * Leave a Reply [199]Cancel reply Enter your comment here... ____________________________________________________________ ____________________________________________________________ ____________________________________________________________ ____________________________________________________________ Fill in your details below or click an icon to log in: * * * * * [200]Gravatar Email (required) (Address never made public) ____________________ Name (required) ____________________ Website ____________________ WordPress.com Logo You are commenting using your WordPress.com account. ( [201]Log Out / [202]Change ) Google photo You are commenting using your Google account. ( [203]Log Out / [204]Change ) Twitter picture You are commenting using your Twitter account. ( [205]Log Out / [206]Change ) Facebook photo You are commenting using your Facebook account. ( [207]Log Out / [208]Change ) [209]Cancel Connecting to %s [ ] Notify me of new comments via email. [ ] Notify me of new posts via email. Post Comment About ericlaw Impatient optimist. Dad. Author/speaker. Created Fiddler & SlickRun. PM @ MSFT '01-'12, and '18-, presently working on Microsoft Edge. My words are my own. [210]View all posts Categories [211]browsers [212]dev [213]web Tags [214]browsers [215]dev [216]webdev [217]Previous Post App-to-Web Communication: Launching Web Apps [218]Blog at WordPress.com. ____________________________________________________________ ____________________________________________________________ ____________________________________________________________ ____________________________________________________________ Post to [219]Cancel Reblog Post References Visible links 1. https://textslashplain.com/feed/ 2. https://textslashplain.com/comments/feed/ 3. https://textslashplain.com/2020/02/09/demystifying-browsers/feed/ 4. https://textslashplain.com/2020/02/05/app-to-web-communication-launching-web-apps/ 5. https://public-api.wordpress.com/oembed/?format=json&url=https://textslashplain.com/2020/02/09/demystifying-browsers/&for=wpcom-auto-discovery 6. https://public-api.wordpress.com/oembed/?format=xml&url=https://textslashplain.com/2020/02/09/demystifying-browsers/&for=wpcom-auto-discovery 7. https://textslashplain.com/osd.xml 8. https://s1.wp.com/opensearch.xml 9. https://textslashplain.com/about/ 10. https://textslashplain.com/ 11. https://aka.ms/edgejobs 12. https://textslashplain.com/2020/01/19/retiring-internet-explorer/ 13. https://textslashplain.com/2017/03/01/the-trouble-with-magic/ 14. https://docs.microsoft.com/en-us/archive/blogs/ieinternals/url-fragments-and-redirects 15. https://docs.microsoft.com/en-us/archive/blogs/ieinternals/theres-never-magic-but-plenty-of-butterfly-effects 16. https://www.google.com/googlebooks/chrome/big_00.html 17. https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 18. https://developers.google.com/web/updates/2018/09/inside-browser-part1 19. https://developers.google.com/web/updates/2018/09/inside-browser-part2 20. https://developers.google.com/web/updates/2018/09/inside-browser-part3 21. https://developers.google.com/web/updates/2018/09/inside-browser-part4 22. https://developers.google.com/web/updates/2020 23. https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/ 24. https://hacks.mozilla.org/ 25. https://developers.google.com/web/updates/tags/chromium-chronicle 26. https://www.youtube.com/playlist?list=PLNYkxOF6rcICgS7eFJrGDhMBwWtdTgzpx 27. https://www.youtube.com/playlist?list=PLNYkxOF6rcICgS7eFJrGDhMBwWtdTgzpx 28. https://www.youtube.com/playlist?list=PLNYkxOF6rcICgS7eFJrGDhMBwWtdTgzpx 29. https://www.youtube.com/playlist?list=PLNYkxOF6rcICgS7eFJrGDhMBwWtdTgzpx 30. https://www.youtube.com/playlist?list=PLNYkxOF6rcICgS7eFJrGDhMBwWtdTgzpx 31. https://www.youtube.com/results?search_query=chrome+university+2018 32. https://web.dev/learn/ 33. https://amzn.to/2OH7qs2 34. https://hpbn.co/ 35. https://amzn.to/31Ee87u 36. https://amzn.to/38nPieV 37. https://abookapart.com/products/progressive-web-apps 38. https://www.youtube.com/results?search_query=Chrome+Developer+Tools 39. https://fiddler2.com/ 40. https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc/ 41. https://searchfox.org/ 42. https://dxr.mozilla.org/mozilla-central/source/ 43. https://trac.webkit.org/browser 44. https://github.com/WebKit/webkit 45. https://cs.chromium.org/ 46. https://source.chromium.org/chromium/chromium/src?originalUrl=https://cs.chromium.org/ 47. https://thirdpartysource.microsoft.com/ 48. https://github.com/brave/brave-core 49. https://html.spec.whatwg.org/ 50. https://cs.chromium.org/chromium/src/chrome/browser/renderer_context_menu/render_view_context_menu.cc?l=1679&rcl=60c5f33a490f209ca3a4c10da85f9607869d65ae 51. https://cs.chromium.org/chromium/src/chrome/browser/renderer_context_menu/render_view_context_menu.cc?l=2402&rcl=e35c96184d471a4c744097c93a9c4ac9a30d23b0 52. https://cs.chromium.org/chromium/src/chrome/browser/renderer_context_menu/render_view_context_menu.cc?l=1649&rcl=e35c96184d471a4c744097c93a9c4ac9a30d23b0 53. https://bugzilla.mozilla.org/home 54. https://bugs.webkit.org/ 55. https://crbug.com/ 56. https://crbug.com/ 57. https://github.com/brave/brave-browser/issues 58. https://github.com/whatwg/html/issues 59. https://textslashplain.com/ 60. https://docs.microsoft.com/en-us/archive/blogs/ieinternals/ 61. https://blog.cloudflare.com/ 62. https://netsekure.org/ 63. https://noncombatant.org/ 64. https://www.imperialviolet.org/ 65. https://randomascii.wordpress.com/ 66. https://annevankesteren.nl/ 67. https://www.mnot.net/blog/ 68. https://twitter.com/linclark 69. https://twitter.com/codecartoons 70. https://twitter.com/kosamari 71. https://twitter.com/intenttoship 72. https://twitter.com/mikewest 73. https://twitter.com/slightlylate 74. https://twitter.com/paul_irish 75. https://twitter.com/jaffathecake 76. https://twitter.com/RickByers 77. https://twitter.com/petele 78. https://twitter.com/DasSurma 79. https://twitter.com/jochen_e 80. https://twitter.com/jyasskin 81. https://twitter.com/yoavweiss 82. https://twitter.com/cwilso 83. https://twitter.com/domenic 84. https://twitter.com/Paul_Kinlan 85. https://twitter.com/__apf__ 86. https://twitter.com/emschec 87. https://twitter.com/estark37 88. https://twitter.com/laparisa 89. https://twitter.com/nasko 90. https://twitter.com/DotProto 91. https://twitter.com/sleevi_ 92. https://twitter.com/justinschuh 93. https://twitter.com/rowan_m 94. https://twitter.com/beverloo 95. https://twitter.com/dominickng 96. https://twitter.com/asankah 97. https://twitter.com/darinwf 98. https://twitter.com/arw 99. https://twitter.com/dalmaer 100. https://twitter.com/mathias 101. https://twitter.com/davidben__ 102. https://twitter.com/BruceDawson0xB 103. https://twitter.com/addyosmani 104. https://twitter.com/igrigorik 105. https://twitter.com/madmath 106. https://twitter.com/aawc 107. https://twitter.com/notyetsecure 108. https://twitter.com/bfgeek 109. https://twitter.com/avidrissman 110. https://twitter.com/ppk 111. https://twitter.com/spazef0rze 112. https://twitter.com/FremyCompany 113. https://twitter.com/soMelanieSaid 114. https://twitter.com/trossweb 115. https://twitter.com/mnot 116. https://twitter.com/alex_wykoff 117. https://twitter.com/miketaylr 118. https://twitter.com/agl__ 119. https://twitter.com/nicj 120. https://twitter.com/johnwilander 121. https://twitter.com/othermaciej 122. https://twitter.com/pes10k 123. https://twitter.com/arturjanc 124. https://twitter.com/ifsecure 125. https://twitter.com/SimmerVigor 126. https://twitter.com/annevk 127. https://twitter.com/AaronGustafson 128. https://twitter.com/awbjs 129. https://twitter.com/ciphercoffee 130. https://twitter.com/adambroach 131. https://twitter.com/_zouhir 132. https://twitter.com/KamilaHasanbega 133. https://twitter.com/mholt6 134. https://twitter.com/jgrahamc 135. https://twitter.com/shhnjk 136. https://twitter.com/patrickkettner 137. https://twitter.com/agektmr 138. https://twitter.com/KingstonTime 139. https://twitter.com/BraveSampson 140. https://twitter.com/_brianclifton 141. https://twitter.com/brianbondy 142. https://twitter.com/owencm 143. https://twitter.com/natashenka 144. https://twitter.com/alexainslie 145. https://twitter.com/mike_conley 146. https://twitter.com/TanviHacks 147. https://twitter.com/cramforce 148. https://twitter.com/codepo8 149. https://twitter.com/notwaldorf 150. https://twitter.com/konklone 151. https://twitter.com/ejcx_ 152. https://twitter.com/ejcx_ 153. https://twitter.com/Scott_Helme 154. https://twitter.com/aprilmpls 155. https://twitter.com/eastdakota 156. https://twitter.com/bcrypt 157. https://twitter.com/prdonahue 158. https://twitter.com/xxdesmus 159. https://twitter.com/jyzg 160. https://twitter.com/tiraniddo 161. https://twitter.com/tkadlec 162. https://twitter.com/kylealden 163. https://twitter.com/gsnedders 164. https://twitter.com/dstorey 165. https://twitter.com/ChrisLove 166. https://twitter.com/TravisLeithead 167. https://twitter.com/tameverts 168. https://twitter.com/gregwhitworth 169. https://twitter.com/SeanOnTwt 170. https://twitter.com/bagder 171. https://twitter.com/davidbaron 172. https://twitter.com/tjvantoll 173. https://twitter.com/thejohnjansen 174. https://twitter.com/mcmanusducksong 175. https://twitter.com/ma1 176. https://twitter.com/benadida 177. https://twitter.com/ivanristic 178. https://twitter.com/patmeenan 179. https://twitter.com/Souders 180. https://twitter.com/jungkees 181. https://twitter.com/dok2001 182. https://twitter.com/_scottlow 183. https://twitter.com/EdgeDevTools 184. https://twitter.com/chromeDevTools 185. https://twitter.com/webkit 186. https://twitter.com/webcompat 187. https://twitter.com/ericlaw 188. https://twitter.com/ericlaw/following 189. https://caniuse.com/ 190. http://chromestatus.com/ 191. https://chromestatus.com/features/schedule 192. https://omahaproxy.appspot.com/ 193. https://chromiumdash.appspot.com/schedule 194. https://www.chromium.org/developers/design-documents 195. https://ssllabs.com/ 196. https://aka.ms/edgejobs 197. https://textslashplain.com/2020/02/09/demystifying-browsers/?share=twitter 198. https://textslashplain.com/2020/02/09/demystifying-browsers/?share=facebook 199. https://textslashplain.com/2020/02/09/demystifying-browsers/#respond 200. https://gravatar.com/site/signup/ 201. javascript:HighlanderComments.doExternalLogout( 'wordpress' ); 202. https://textslashplain.com/2020/02/09/demystifying-browsers/ 203. javascript:HighlanderComments.doExternalLogout( 'googleplus' ); 204. https://textslashplain.com/2020/02/09/demystifying-browsers/ 205. javascript:HighlanderComments.doExternalLogout( 'twitter' ); 206. https://textslashplain.com/2020/02/09/demystifying-browsers/ 207. javascript:HighlanderComments.doExternalLogout( 'facebook' ); 208. https://textslashplain.com/2020/02/09/demystifying-browsers/ 209. javascript:HighlanderComments.cancelExternalWindow(); 210. https://textslashplain.com/author/ericlaw1979/ 211. https://textslashplain.com/category/browsers/ 212. https://textslashplain.com/category/dev/ 213. https://textslashplain.com/category/tech/web/ 214. https://textslashplain.com/tag/browsers/ 215. https://textslashplain.com/tag/dev/ 216. https://textslashplain.com/tag/webdev/ 217. https://textslashplain.com/2020/02/05/app-to-web-communication-launching-web-apps/ 218. https://wordpress.com/?ref=footer_blog 219. https://textslashplain.com/2020/02/09/demystifying-browsers/ Hidden links: 221. https://textslashplain.com/ 222. https://textslashplain.com/2020/02/09/demystifying-browsers/#comment-form-guest 223. https://textslashplain.com/2020/02/09/demystifying-browsers/#comment-form-load-service:WordPress.com 224. https://textslashplain.com/2020/02/09/demystifying-browsers/#comment-form-load-service:Twitter 225. https://textslashplain.com/2020/02/09/demystifying-browsers/#comment-form-load-service:Facebook