This is a problem I’ve encountered on both Windows and Mac for many, many months and it’s driving me crazy. Whenever I drop in a “debugger” directive or set a breakpoint in the Safari scripts console, more than half the time the code breaks where it is supposed to, but the code view is blank; some of the JS files are also blank, but not all. The console tells me what line I’m on and displays the call stack correctly, plus I can step through my code. I just can’t see the script. I’ve tried flushing my cache and disabling my cache and altering the JS files (thinking it might be because the code is compiled at that point). Nothing seems to help. I know that if I refresh the debugger enough (right-click and ‘reload’), eventually I’ll see my script. But it’s a time-consuming process. And I’d use a different browser, but I actually need to use Safari in this case.
One thing that might be a factor is that I nest functions and I assign anonymous functions to variables (a la Douglas Crockford). Does anyone else have this problem? Does anyone have a solution?
[Edit] I just noticed that when the file comes off a remote server, it shows up fine. My primary logic files, though, are coming off my local LAMP stack off a virtual host and they are ALL blank. Again, eventually they will show up. Maybe this is an Apache thing?
[Edit] This seems to be related to the problem written about elsewhere: e.g. “Resource interpreted as other but transferred with MIME type application/javascript”. The problem is I’ve gone through my http headers, my <meta> tags and my <script> tags to make sure the mime-types are consistent.
When pulling down a JS file, according to curl, my http headers are:
< HTTP/1.1 200 OK
< Date: Fri, 21 May 2010 13:04:42 GMT
< Server: Apache/2.2.14 (Unix) mod_ssl/2.2.14 OpenSSL/0.9.8l DAV/2 PHP/5.3.1
< Last-Modified: Fri, 21 May 2010 08:48:15 GMT
< ETag: "dda3a6-2214-48716c07891c0"
< Accept-Ranges: bytes
< Content-Length: 8724
< Cache-Control: no-cache
< Content-Type: application/x-javascript
…my index.html has this in the head:
<meta http-equiv="content-script-type" content="application/x-javascript">
…and I call my JS files like so:
<script type="application/x-javascript" src="Application.js"></script>
The warning I see in Safari’s resources window is:
Resource interpreted as other but transferred with MIME type application/x-javascript
Apache seems to be doing everything right! I’d submit this as a Safari bug, but it only seems to happen for my local server.
I think I’ve isolated the issue and the work-around is simple: if you need to debug, turn off the Resources tab in Safari; and if you need to track resources, don’t expect to be able to debug because often you won’t be able to.
I thought this was only an issue with my local environment, but it’s an issue I’ve now witnessed with many sites now that I’ve started testing; I never noticed because I’d not tried resource-tracking and debugging simultaneously on other sites. This must be an issue with the debugging window because this has absolutely no impact on script execution in the browser window; in fact, even the debugger can keep track of breakpoints and code stepping, it just can’t show you the code you’re stepping through. This issue does not appear in Chrome, so I’m guessing this is a Safari-only problem rather than a broader webkit problem.
I’ll try to post this to Apple’s bug tracker.