24
console.log('hi');

undefined

Is there any similar implementation in 6.0? or Did I do something wrong?

mko
  • 21,334
  • 49
  • 130
  • 191
  • @JosephSilber in safari 6, console object exist but can write anything in the console – mko Aug 19 '12 at 05:57

6 Answers6

27

Make sure that you're selecting "All" at the top of your console window. Sometimes it'll automatically switch to only show Errors, Warnings, or Logs. If you select "All", then you should see all your console.log()s!

enter image description here

M -
  • 26,908
  • 11
  • 49
  • 81
24

I found the problem! Logs don't appear in the interactive console (which is located on the bottom), but in the Current Log window instead! You can access it through Develop > Show Error Console or the rightmost source icon in the Web Inspector.

So strange! Is it that hard to get simple output in the console, like puts and print in Ruby?

Tyler Mumford
  • 306
  • 4
  • 12
mko
  • 21,334
  • 49
  • 130
  • 191
  • 3
    so basically if I open the web inspector and put `console.log("i hate apple");` *then* switch to the error console (by clicking on the text bubble on the right side) it shows me the output.. but then if i go back to resource.. and put another console log statement.. it doesn't show up unless i restart the web inspector.. what's going on here? – abbood Sep 05 '13 at 09:02
  • 2
    How do you make this work with iOS? I'm able to see the web inspector for my page, but the "Show Error Console" option is disabled. – Matt Huggins Aug 08 '14 at 22:40
  • Matt, I was having the same issue trying to debug an iOS 8 UIWebView using Safari on Mavericks. Using console.log() didn't really work well, the console would randomly seem to stop working and I also had that option disabled. Updating to the [latest nightly build of WebKit](http://nightly.webkit.org/) made things much more stable. – Barrie Oct 01 '14 at 07:58
  • Well, I'm trying to debug something right now, and the console tab doesn't show anything in Safari but Chrome, same site, works fine. I was getting stuff with Safari but it stopped, and I don't want to have to restart the browser (if that even resolves it). Pretty hard core bug with Safari IMO, as of 9.x even! – clearlight Dec 15 '15 at 07:22
5

Not preferred but it works.

console.error(message);

Note: I was running gulp serve -d -w which includes a watch. Even then I couldn't see the messages until I restarted gulp.

roasty
  • 172
  • 1
  • 9
4

I have to develop "for Safari" as my primary target, but because Chrome and Safari both use WebKit as their engine, they are ALMOST identical in execution (one difference is the Safari parses date strings to Date worse).

So debugging and developing in Chrome is generally good enough as long as you do a final sanity check in Safari before checking in your code.

That being said, I wrote a console wrapper that gives me the ability to call console.log in any browser... if it supports console.log, then it just works... otherwise it logs the message in an array that can be inspected.

//======================================================//
// multi browser compatibility - not all support console
//======================================================//
var dummyConsole = [];
var console = console || {};
if (!console.log) {
    console.log = function (message) {
        dummyConsole.push(message);
    }
}
dano
  • 5,640
  • 5
  • 27
  • 27
  • But then you have to go looking for it. Good luck trying to debug a proxy.pac script to use discretion forwarding to squid (to be overly specific and random). The only thing I found that worked to figure out what the hell was going on there was to put alert() in the code and then it shows up on Chrome event log. (As long as you've reloaded your script). document.write() and console.log() cause error's in pac scripts but Crhome is smart about it. I am a Mac fiend, but console.log is flaky in Safari 9.0.1 even as late as Yosemite but the same code logs just fine in Chrome. – clearlight Dec 15 '15 at 07:20
  • 1
    console log can take more then one argument, i would change it to ` function (....messages) {dummyConsole.push(messages);}` – yellowsir May 23 '20 at 19:11
2

If you are using JQuery what I do is dynamically add an ouput field to the page so I can see JavaScript values. The z-index is to keep it on the top. Style it however you want. I usually add a colored border or bright background color so it is easy to find on screen.

var output= 'hello';
$('body').append("<div style='width:50px;z-index:1000'>" + output + "</div>");
mbokil
  • 3,202
  • 30
  • 22
2

I recently came across this post because I was having a similar issue with Safari 14. I use Grammarly for Safari and it creates another frame where the requests are sent. This may happen with other extensions as well.

Safari should select the correct frame by default, but if it does not then you will not see the console logs. If this is happening, there will be a dropdown at the lower right corner of the console window. If you select the website frame the logs will start appearing.

Image of dropdown

Kevin M
  • 21
  • 2