Debug: Update README with how to use chrome black boxing feature to show original log line

[hepiyellow]

Hi,

I think it is worth mentioning in the README about chrome's black boxing feature that allows seeing the original code line of the debug log.

[nkolban]

Can you elaborate on this? Lets assume that folks looking at this issue aren't familiar with the "Chrome black boxing feature" ... where should we go to read more about this? Do you have a suggestion for the content that should be added to the README.md file?

[hepiyellow]

I also didn't know about black boxing. I encountered it on this link:
https://gist.github.com/paulirish/c307a5a585ddbcc17242

Here is the official chrome documentation for this feature:
https://developer.chrome.com/devtools/docs/blackboxing

Basically, to make it work for the debug package, you need to:

• go into setting of your chrome dev tools (available in the chrome dev tools menu, not chrome's menu)
• click on the Blackboxing tab
• Add 2 patterns:
  
  
  
  • /debug/browser.js
  
  
  • /debug/debug.js
  
  

That's it, from now on you can see the original line numbers (and file) of your debug logs.

I just added patterns of file names that I saw next to logs that I have made with debug. I guess the pattern path, might be depending on the way you pack your code, I was using web pack in dev mode.

I guess you should test it, and review before you paste this to the README.

Cheers
Erez

[FredyC]

@hepiyellow Thank you very much, that's exactly what I was looking for. I was kinda annoyed to see the browser.js on every log line. Really recommend to everyone.