Kinda funny — we have a new application and none of us were testing it in IE8! \u00a0Sound familiar? \ud83d\ude42<\/p>\n
The application wouldn’t load at all, not at all, in IE8. Debugging was tedious with the IE8 debug tool.<\/p>\n
Our specs are pretty up to date but IE8 is still on the table for our customers. \u00a0The headless testing isn’t set up with any IE instances to cover this either. The UI piece is Backbone, Require, Underscore, JQuery, and Less. \u00a0All tried javascript technologies.<\/p>\n
Fix the Tests<\/strong> Fix the Application<\/strong> 1. \u00a0Move a console.log patch to load with the application — IE8 can’t do console.log unless its debugging and developers were putting them all over in the code. This technique is well documented on StackOverflow and other sites. Looks like this:<\/p>\n Make sure this script is called before everything else in your index.html or whatever:<\/p>\n 2. Change the doctype. We had<\/p>\n but it was causing IE8 not to load the page, so I put in this, that seemed to solve it:<\/p>\n 3. IE8 was hating it when we set the type as follows:<\/p>\n So “type=’application\/javascript’ “had to come out — nothing set now at all.<\/p>\n Closing<\/strong> On other environments, Less is already compiled — but continues to be a problem loading slow and needed refreshes for IE8 when resolving at runtime. \u00a0We decided there was nothing we could do to solve this, except point at optimized CSS files at the right time. \u00a0There are ways of compiling everything but what you are woking on too.<\/p>\n Again, elbow grease. \u00a0Who ever said this shit gets any easier?<\/p>\n","protected":false},"excerpt":{"rendered":" Kinda funny — we have a new application and none of us were testing it in IE8! \u00a0Sound familiar? \ud83d\ude42 The application wouldn’t load at all, not at all, in IE8. Debugging was tedious with the IE8 debug tool. Our specs are pretty up to date but IE8 is still on the table for our […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/posts\/581"}],"collection":[{"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/10kdev.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=581"}],"version-history":[{"count":25,"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/posts\/581\/revisions"}],"predecessor-version":[{"id":607,"href":"http:\/\/10kdev.net\/index.php?rest_route=\/wp\/v2\/posts\/581\/revisions\/607"}],"wp:attachment":[{"href":"http:\/\/10kdev.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10kdev.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=581"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10kdev.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nFirst, I noticed none of the QUnits ran in IE8. \u00a0So tracing it back, I noticed there was a library someone had put into the applications Require configuration, but not in the test config — and that did the trick. \u00a0For whatever reason it worked in the other browsers.<\/p>\n
\nNext, the application wasn’t loading at all in IE8 at runtime. \u00a0I had to do three more things to get it working:<\/p>\n\r\n\/\/mock_log_console.js\r\nif (typeof ( console ) !== 'undefined' && console != null) {\r\n\r\n} else {\r\n console = {\r\n log:function () {\r\n \/\/alert("log"); \/\/if you want, I usually do not\r\n },\r\n warn:function () {\r\n },\r\n error:function () {\r\n }\r\n }\r\n}\r\n<\/pre>\n\r\n<script type="text\/javascript" src="mock_log_console.js"><\/script><\/pre>\n
\r\n<!DOCTYPE html>\r\n<\/pre>\n
\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN"\r\n "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">\r\n<\/pre>\n
\r\n\r\n<script type="application\/javascript"><\/script>\r\n\r\n<\/pre>\n
\nDebugging and fixing consisted of:<\/p>\n\n