Surfin' Safari

Introducing Drosera

Posted by Timothy Hatcher on Wednesday, June 28th, 2006 at 12:35 am

Drosera JavaScript DebuggerI would like to introduce a new addition to the WebKit open source tools—a JavaScript debugger. Drosera, named after the largest genera of bug eating plants, lets you attach and debug JavaScript for any WebKit application—not just Safari.

One of the unique things about Drosera, like the Web Inspector, is that over 90% of it is written in HTML and JavaScript. This is a true testament of what you can do with web technologies today and the rapid development that WebKit allows.

So update your tree or download the nightly and give Drosera a try. The nightly always has JavaScript debugging enabled, you just need to attach from Drosera. However, to attach to Safari with your own WebKit build you will need to type the following once in the Terminal:

defaults write com.apple.Safari \
WebKitScriptDebuggerEnabled -bool true

To debug your application’s JavaScript you will need to enable this default for your application’s bundle identifier. Additionaly you need to launch your application using the TOT WebKit frameworks. You can easily do this with the run-webkit-app script inside WebKitTools/Scripts, then you will see your application show up in Drosera’s attach window.

Our bugzilla now has a Drosera component, so please feel free to file any bugs, enhancement requests and especially patches!

64 Responses to “Introducing Drosera”

  1. chrisholland Says:

    AWESOME! someone digg this :)

  2. xenon Says:

    Already done. http://digg.com/programming/WebKit_adds_a_JavaScript_Debugger

  3. aneumann Says:

    This javascript debugger could be very useful for me. Thanks for providing!

    I have a problem though (maybe I am just misunderstanding the concept, maybe it is a bug).

    If you open a SVG file, lets say http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/create_elements.svg (thats a pretty simple file) and attach Drosera to webkit and reload the file it correctly loads the inline ecmascript sourcecode. I can correctly set breakpoints, but when I execute the script, (lets say by clicking on ‘Click on this text to create a new rectangle’) I can only see the function name ‘createRect()’ but the debugger doesn’t change to the code view of the function ‘createRect()’. It seems to stop at breakpoints and works with “Continue”, but without seeing the code and having the ability to add variables to watch I cannot use it.

    Is this a bug or am I doing something wrong?

    Thanks for any help on that,
    Andreas

  4. google636 Says:

    Thank you so much!
    I can’t wait until all these new features make their way into the public Safari builds. It will be such a help for all us web developers and designers!

  5. jhurshman Says:

    I am very excited about this tool, but I am afraid I cannot figure out how to access it. I have downloaded the nightly, but I don’t see “Drosera” anywhere on the menus. (Also, I thought the nightly used to show “420+” as the build number, but now it’s showing “419.3″.)

    Sorry for the lack of clue.

  6. jhurshman Says:

    OK, the WebKit version test at http://webkit.opendarwin.org/webdevelopers/webkit_version.html is showing 420+, so I guess that’s fine.

  7. google636 Says:

    jhurshman - 
    Take the apps (Drosera and Webkit) off the dik image, then launch drosera. 
    File > Attatch…
    Select Webkit, then click attatch. The debugger will come up.

  8. jhurshman Says:

    I see. Drosera an additional application. I use NightShift to get the latest nightly and didn’t realize I was missing something.

    Thanks!

  9. Pingback from Painfully Obvious » Blog Archive » Link: Drosera:

    [...] Jun28 Hot damn — Safari has a JavaScript debugger now. I’m really impressed with the WebKit project’s recent [...]

  10. ccapeng Says:

    Generally in my daily development, safari js/dhtml give me more troube. Hope, this tool can give me good help.

    Not sure anyhing new in Safari 2.0.4. But, please release new js engine and don’t wait for next OS X(10.5). This will make all web developers happy.

  11. Pingback from Information Technology » WebKit adds a JavaScript Debugger:

    [...] osera, like their Web Inspector, is that over 90% of it is written in HTML and JavaScript. read more | digg story

    Make money with PaidSurveysOnline.com – #1 Sur [...]

  12. Trackback from Ajaxian:

    Safari get a Javascript debugger

    Its about time – Webkit – the development version of Safari, has gotten a real javascript debugger. Its called Drosera, and the Surfin Safari blog has the announcement. Or you can just download the latest nightly of Webkit and go. Its interesting t…

  13. Pingback from Ajaxian » Safari get a Javascript debugger:

    [...] ows that for a something that isn’t even a “real programming language”? Posted by Rob Sanheim at 10:16 am Rate this. [...]

  14. Pingback from Deep Codes » WebKit Debugger:

    [...]

    Deep Codes

    About Deep Codes

    WebKit Debugger

    Surfin’ Safari – Blog Archive » Introducing Drosera
    June 28th, 2006 | Category: Programming [...]

  15. Pingback from Digitaria Blog » Blog Archive » Drosera: WebKit Javascript Debugger Released:

    [...] lants, lets you attach and debug JavaScript for any WebKit application—not just Safari. http://webkit.opendarwin.org/blog/?p=61

    This entry was posted

    [...]

  16. Pingback from The Electric State » Blog Archive » Is Apple poised to rule the web publishing industry?:

    [...] a rumor. Then, just today, Apple programmers announced that Safari nightly builds include Drosera , a JavaScript debugger. It seems like Apple is committed to give web developers using i [...]

  17. Pingback from Drosera, WebKit/Safari’s new JS Debugger at Symlinked:

    [...] Debugger

    28Jun06

    Drosera: xenon: I would like to introduce a new addition to the WebKit open source tools—a JavaScript [...]

  18. Pingback from ceejayoz.com · Drosera - Safari JavaScript Debugger:

    [...] a – Safari JavaScript Debugger Wednesday, June 28th, 2006 by ceejayoz Hell yes: Safari gets a JavaScript debu [...]

  19. Pingback from Sam’s random musings » Drosera - A JavaScript Debugger for WebKit:

    [...] Drosera – A JavaScript Debugger for WebKit: The WebKit group released a new tool called Drosera last night. It’s a JavaScript debugger that will work alongside any WebKit application, inc [...]

  20. Trackback from Backup Brain:

    Safari JavaScript Debugger!

    From Surfin’ Safari, Introducing Drosera: I would like to introduce a new addition to the WebKit open source tools—a JavaScript debugger. Drosera, named after the largest genera of bug eating plants, lets you attach and debug JavaScript for any …

  21. Pingback from macprime.ch - Ticker » Blog Archiv » WebKit erhält Zuwachs: «Drosera»:

    [...] , OmniWeb etc.). Die Installations-Anleitung sowie das neuste NightlyBuild findet sich bei Surfin’ Safari
    [...]

  22. Pingback from Pythoneer » Drosera - Safari JavaScript Debugger:

    [...] AX (style) guide Compared to other browsers the WebKit crew has released a JavaScript debugger quite soon af [...]

  23. Pingback from Sooey » Blog Archive » JavaScript debugger Drosera:

    [...] k Download

    JavaScript debugger Drosera
    June 29th, 2006
    Introducing Drosera。WebKitベース?JavaScriptデ?ッガ?WebKit?ソースツリー?入り? [...]

  24. Trackback from 미남?? ?러쿵저러쿵:

    Drosera, Safari를 위한 JavaScript 벌레 퇴치기(debugger)

    Safari가 사용하고 있는 오픈 소스 웹 브?우져 엔진? WebKit? 개발 버전? 탑재한 WebKit 웹 브?우져를 위한 JavaScript debugger가 발표?었다.
    Drosera?는 ?름? 가장 ? ?충 ?물류? ?름?서 …

  25. Pingback from All About Web Technologies » Safari gets a Javascript debugger:

    [...] gotten a real javascript debugger. Its called Drosera, and the Surfin Safari blog has the announcement. Or you can just download the latest nightly of Webkit and go. Its interest [...]

  26. squareman Says:

    Is there a way to get this to work with _current_ releases of Safari? I tried it and it’s fantabulous for using with the current nightly build of Webkit; however, it would also be most helpful for trouble-shooting sites being delivered to the installed base of Safari users instead of the future ones. Is there a way to do that? (same question for Web Inspector too).

  27. Trackback from nonsmokingarea.com:

    dev: JavaScript debugger for Safari

    as reported on Ajaxian, Webkit – the browser-engine powering Safari, Mail and other OS X applications – has finally received an integrated JavaScript-debugger called Drosera. since Safari’s implementation of JavaScript is differing from Firefox a…

  28. Pingback from Pig Pen - Web Standards Compliant Web Design Blog » Blog Archive » Introducing Drosera:

    [...] ure « Al Gore 2008 Introducing Drosera Introducing Drosera a new addition to the WebKit open source tools—a JavaScript debugger [...]

  29. kitchen utensils Says:

    Great tool. Worked great for my websie. Got all my javascript programmers hooked onto it.

  30. Pingback from CSS-Werkzeugkasten at Zeitreise | 2006:

    [...] fizierte Props angezeigt. Der Web Inspektor ist noch nicht fertiggestellt. Seit 2-3 Wochen kommen die Nightlies auch mit einem JavaScript-Debugger namens Drosera. Drosera zeigt den JS-Code an und [...]

  31. Pingback from PJ Kix > Hi-tek / Lo-life » Blog Archive » Surfin’ Safari - Blog Archive » Introducing Drosera:

    [...] oke Mentos Surfin’ Safari – Blog Archive » Introducing Drosera Surfin’ Safari – Blog Archive » Introducing Drosera This entry was posted [...]

  32. Pingback from Drosera at Trevor Livingston:

    [...] Drosera Check out Drosera, an OS X application for debugging JavaScript. [...]

  33. 3ecomad Says:

    really wonderful.!!!

  34. Pingback from Bieber Labs » links for 2006-08-27:

    [...] Debugging Safari | Getahead Some Safari debugging tips (tags: safari browsers debugging) Surfin’ Safari – Blog Archive » Introducing Drosera Safari javascript debugger. (tags: safari javascript browsers [...]

  35. kL Says:

    It amazes me that the debugger interface is written in HTML and CSS (it’s probably a bug, but you can click ‘inspect’ on Drosera’s UI elements and see how it’s implemented).

  36. Pingback from MAB Blog » Blog Archive » Apple’s Javascript Debugger: Drosera:

    [...] sole in Safari, but quickly gave up and decided to give Apple’s Javascript debugger (Drosera) a try. I tried it a couple months ago but couldn’t get it to work, but I decided to download the late [...]

  37. Pingback from IT快餐——–发现,分享,关注互联网 » 10-31:

    [...] r-mouseovers tree folder drag css youhua css layout control cool web start dontclick js debug ibox 漂亮的box效果 Entry Filed under: 个人门户 Leave a Comment [...]

  38. Pingback from Webkrauts » Webentwicklung auf Safari:

    [...] , welche Styles auf dieses Element vererbt werden und vieles mehr. Drosera Drosera ist zum einen der lateinische Name f [...]

  39. Pingback from Gedankenablagerungen » Dashcode Debugger:

    [...] Dashcode Debugger
    Gepostet von Sebastian in Computer 

    Meine Begeisterung für Drosera – den JavaScript-Debugger des WebKit-Projekts – war zu Anfang fast kaum zu bremsen bis ich dann feststel [...]

  40. adampasz Says:

    Sounds great. I’d love to be able to debug my JS code on Safari. Unfortunately, the 2nd to last paragraph of the post that explains how to do this might as well have been written in another language. Until somebody posts a tutorial or something, I guess I’m sticking to alert statements…

  41. Pingback from shepherdweb.com » Safari Bugs (Bring on OS 10.5 Leopard) » Shane Shepherd: web design and development; music:

    [...] Scriptaculous and other Javascript frameworks. A javascript debugger, named Drosera, was announced in June 2006 and integrated into WebKit. However, you must download one of the WebKit nightly builds in o [...]

  42. Pingback from Perpetual Thought Cycle » Blog Archive » SafariのJavascriptデバッガ:

    [...] る人にはかなり便利かもしれない。 ダウンロードしとこっと。 Surfin’ Safari – Blog Archive » Introducing Drosera ちなみに、「debugger」をずっと「デバ [...]

  43. footcow Says:

    One thing I don’t understand about Drosera and WebKit … First is there any forum to ask questions ? Second I don’t understand why I have some functionnalities that are not running using Safari … and when I try to debug them with WebKit + Drosera … everything is running perflectly … !? Any idea to help me about this point ?

  44. zenslug Says:

    I had a lot of hope with Drosera, but it is pretty difficult to use and has limited functionality. Firebug for Firefox is so much better, I just don’t understand why Safari can’t get a tool of the same caliber. I feel like a monkey with a black box and two metal rods when trying to figure out what the is going on inside Safari, what my JS objects look like.

    How do I set a watch? I can set a break point and sometimes Drosera will show me the structure of the JS objects in scope. Sometimes it just tells me it is an object. That’s not very helpful.

  45. Pingback from Paloş::Code.Blog() - Blog Archive - Debugging and Profiling JavaScript:

    [...] .com/articles/view/how-to-debug-javascript-problems-with-op/ Safari http://webkit.org/ http://webkit.org/blog/61/introducing-drosera/ Safari uses a rendering engine whic [...]

  46. Garrett Says:

    This has been in WebKit for a year now.

    When will it be available in Safari?

  47. Pingback from Soup of the day » Blog Archive » The wonders of WebKit and Drosera:

    [...] ut under the hood of the nondescript application is a wondrous Javascript Debugger called Drosera. Once you have launched WebKit successfully you then need to launch Drosera and [...]

  48. Pingback from Scriptorama.nl » Het ultieme overzicht van in-browser webdevelopment tools:

    [...] r voor Firefox, misschien zelfs wel iets meer! Webdevelopment tools voor Safari / WebKit Drosera – Een javascript debugger voor WebKit. Je hoeft enkel een nightly build van WebKit te downloaden en WebKit v [...]

  49. Trackback from FlasheR!:

    And some else, come here……

    The most interest!…

  50. Pingback from 30 second review of Safari 3 beta at remy sharp’s b:log:

    [...] Drosera is now built in to Safari (you may have to turn on the debug menu though) – which means a built in element inspector for developers. [...]

  51. Pingback from I’m not a Safari switcher | #comments:

    [...] no question about switching… (although, to be honest I haven’t really explored Drosera at all – but that’s just javascript, nothing like the glory of Web [...]

  52. Pingback from Webkit catching up with Firefox and Firebug » alexander kirk » Blog Archive:

    [...] developers it was always hard to debug and inspect your web applications running in Safari. With Drosera a decent debugger exists since June 2006 (for Webkit only so far, though — it’s not [...]

  53. Pingback from » Links for 22/06/07Jon Atkinson Dot Org:

    [...] Introducing Drosera [...]

  54. Pingback from gadget geeks » Blog Archive » gagdet geeks - episode 6:

    [...] Drosera: WebKit/Safari JavaScript Debugger. [...]

  55. Pingback from OSCON 2007: Learning Ajax, by Alex Russell :: canspice.org:

    [...] examples of inspection and debugging tools include Firebug, TamperData, SquareFree Shell, Drosera, Microsoft Script Editor, etc, etc, [...]

  56. Pingback from Apple iPhone Tech Talk Debriefing - Part 1 « The General Theory of RIAtivity:

    [...] Test and debug using Safari 3.0 on the desktop using the Element Inspector feature and Drosera third-party [...]

  57. Pingback from Jason Prini .com » Blog Archive » Mac Web Development - Safari debugging:

    [...] Run the script in terminal as shown here and here for Drosera. [...]

  58. dotnetCarpenter Says:

    How do I activate Drosera in Windows? I can see a “inspector” folder in the WebKit.resources folder but I don’t see any exe file I can send argument to.

  59. recombinant Says:

    @dotnetCarpenter: if you look at the bottom of this page: http://trac.webkit.org/projects/webkit/wiki/Drosera you’ll notice that “Drosera is currently not available on Windows. “, which is unfortunate, since personally I’d really like to be able to debug on both platforms. However, the wiki continues by saying that it shouldn’t be that difficult to port — so it’s perhaps we’ll see a Windows version eventually.

  60. Pingback from Surfin’ Safari - Blog Archive » Ten New Things in WebKit 3:

    [...] [...]

  61. Pingback from 10 funcionalidades para Webkit 3 | aNieto2K:

    [...] navegadores, WebKit tiene el detalle de desarrollar una serie de herramientas como Web Inspector y Drosera para ayudarnos a debugear nuestras aplicaciones. Con el fin de hacerlas compatibles con este [...]

  62. Pingback from JavaScript ベンチマーク SunSpider 0.9 - METAREAL:

    [...] の開発者たちは素晴らしいレンダリング・エンジンだけではなく、Drosera や Web Inspector などの Web 開発者向けツールを提供してきたが、今度は [...]

  63. andrew.hedges Says:

    I don’t see any discussion of using Drosera with Dashboard widgets here. Is it possible to attach to a Widget process? I tried doing the defaults write thing, but when I choose “Attach” in Drosera, the Widget doesn’t show up in the list.

  64. Mark Rowe Says:

    @andrew: Dashcode is the tool of choice for debugging JS in widgets. Its debugger has a similar featureset to that in Drosera.