Chrome's Dev Tools are great for debugging web workers as I can "browse" into that JavaScript environment and set break points. Even the console works as expected.

On Safari, it is a pletely different story. console.log from the web worker doesn't even print in the console. I see the worker script loaded and I put a break point on it, but it doesn't break. I don't even see the scripts that were loaded with importScripts.

How can I use Safari's Web Inspector to troubleshoot problems?

Not that I think it matters, but I'm using Safari 8.

Chrome's Dev Tools are great for debugging web workers as I can "browse" into that JavaScript environment and set break points. Even the console works as expected.

On Safari, it is a pletely different story. console.log from the web worker doesn't even print in the console. I see the worker script loaded and I put a break point on it, but it doesn't break. I don't even see the scripts that were loaded with importScripts.

How can I use Safari's Web Inspector to troubleshoot problems?

Not that I think it matters, but I'm using Safari 8.

• javascript
• debugging
• safari
• web-worker

Share Improve this question Follow asked Jun 5, 2015 at 12:23 Daniel A. WhiteDaniel A. White 191k4949 gold badges379379 silver badges466466 bronze badges 7

• 1 Is there a reason you need to use Safari? Are you investigating a Safari specific problem? – Halcyon Commented Jun 5, 2015 at 12:30
• 2 My pany's product supports Safari (and all major browsers) and we want to give customers and support engineers the ability to troubleshoot problems, no matter what web browser. – Daniel A. White Commented Jun 5, 2015 at 12:35
• 3 Chrome, FireFox, Opera, IE, Edge; All show messages from web workers in the console. Safari? "Ha! we know better, you don't need that.." – muttonUp Commented Jul 18, 2015 at 13:19
• All browser look fine, only Safari has problem, that is why need to debug specifically in Safari. – Kyaw Tun Commented Sep 15, 2016 at 7:44
• @KyawTun read my above ment – Daniel A. White Commented Sep 15, 2016 at 12:08

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default -1

Insert the debugger; code in your source

Usage: Insert it anywhere you want to add a breakpoint and when developer console is open automatically execution will pause at that line

var a = 50;
a = a + 5;
debugger; //--> execution is paused here
a = a - 5;

For more info see the Debugger Documentation on mozilla

In lieu of console.log, you can use postMessage. postMessage should allow you to send debug messages to the safari console.

Here is a great example on how to do that, I pasted the main idea below:

//
// In the Main thread
//
var worker = new Worker('/path/of/webworker/code.js')
worker.onmessage = function (e) {
  var result = JSON.parse(e.data);
  if(result.type == 'debug') {
    console.log(result.msg);
  } else if(result.type == 'response') {
    // ... use result.answer ...
  }
}


//
// In the WebWorker
//
function debug(msg) {                                                           
  postMessage(JSON.stringify({type:'debug',msg:msg}));                          
}

onmessage = function (e) {
  var inputData = e.data;
  // work on input data
  debug('Working OK');
  // work some more
  // ...
  postMessage(JSON.stringify({type:'response', answer:42}));
};

If you don't want to play around with postMessage though, David Flanagan made a wrapper for it here that should allow you to at least do debugging with console.log