Introducing Drosera
Posted by xenon on Wednesday, June 28th, 2006 at 12:35 am
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 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!


June 28th, 2006 at 12:53 am
AWESOME! someone digg this
June 28th, 2006 at 1:01 am
Already done. http://digg.com/programming/WebKit_adds_a_JavaScript_Debugger
June 28th, 2006 at 4:41 am
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
June 28th, 2006 at 5:18 am
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!
June 28th, 2006 at 5:24 am
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.
June 28th, 2006 at 5:28 am
OK, the WebKit version test at http://webkit.opendarwin.org/webdevelopers/webkit_version.html is showing 420+, so I guess that’s fine.
June 28th, 2006 at 5:35 am
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.
June 28th, 2006 at 5:42 am
I see. Drosera an additional application. I use NightShift to get the latest nightly and didn’t realize I was missing something.
Thanks!
June 28th, 2006 at 8:31 am
[…] Jun28 Hot damn — Safari has a JavaScript debugger now. I’m really impressed with the WebKit project’s recent […]
June 28th, 2006 at 8:33 am
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.
June 28th, 2006 at 8:55 am
[…] 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 […]
June 28th, 2006 at 9:16 am
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…
June 28th, 2006 at 9:17 am
[…] ows that for a something that isn’t even a “real programming language”? Posted by Rob Sanheim at 10:16 am Rate this. […]
June 28th, 2006 at 9:33 am
[…]
Deep Codes
About Deep Codes
WebKit Debugger
Surfin’ Safari - Blog Archive » Introducing Drosera
June 28th, 2006 | Category: Programming […]
June 28th, 2006 at 9:35 am
[…] 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
[…]
June 28th, 2006 at 10:03 am
[…] 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 […]
June 28th, 2006 at 10:35 am
[…] Debugger
28Jun06
Drosera: xenon: I would like to introduce a new addition to the WebKit open source tools—a JavaScript […]
June 28th, 2006 at 11:51 am
[…] a - Safari JavaScript Debugger Wednesday, June 28th, 2006 by ceejayoz Hell yes: Safari gets a JavaScript debu […]
June 28th, 2006 at 1:09 pm
[…] 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 […]
June 28th, 2006 at 1:49 pm
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 …
June 28th, 2006 at 2:09 pm
[…] , OmniWeb etc.). Die Installations-Anleitung sowie das neuste NightlyBuild findet sich bei Surfin’ Safari
[…]
June 28th, 2006 at 4:23 pm
[…] AX (style) guide Compared to other browsers the WebKit crew has released a JavaScript debugger quite soon af […]
June 28th, 2006 at 8:42 pm
[…] k Download
JavaScript debugger Drosera
June 29th, 2006
Introducing Drosera。WebKitベース�?�JavaScriptデ�?ッガ�?�WebKit�?�ソースツリー�?�入り�?�� […]
June 29th, 2006 at 1:48 am
Drosera, Safari를 위한 JavaScript 벌레 퇴치기(debugger)
Safari가 사용하고 있는 오픈 소스 웹 브�?�우져 엔진�?� WebKit�?� 개발 버전�?� 탑재한 WebKit 웹 브�?�우져를 위한 JavaScript debugger가 발표�?�었다.
Drosera�?�는 �?�름�?� 가장 �?� �?충 �?물류�?� �?�름�?서 …
June 29th, 2006 at 9:24 am
[…] 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 […]
June 30th, 2006 at 10:57 am
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).
July 1st, 2006 at 8:43 am
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…
July 2nd, 2006 at 2:57 am
[…] ure « Al Gore 2008 Introducing Drosera Introducing Drosera a new addition to the WebKit open source tools—a JavaScript debugger […]
July 7th, 2006 at 1:15 pm
Great tool. Worked great for my websie. Got all my javascript programmers hooked onto it.
July 24th, 2006 at 12:16 am
[…] 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 […]
July 30th, 2006 at 5:48 pm
[…] oke Mentos Surfin’ Safari - Blog Archive » Introducing Drosera Surfin’ Safari - Blog Archive » Introducing Drosera This entry was posted […]
August 21st, 2006 at 9:34 pm
[…] Drosera Check out Drosera, an OS X application for debugging JavaScript. […]
August 23rd, 2006 at 10:36 am
really wonderful.!!!
August 27th, 2006 at 5:57 am
[…] Debugging Safari | Getahead Some Safari debugging tips (tags: safari browsers debugging) Surfin’ Safari - Blog Archive » Introducing Drosera Safari javascript debugger. (tags: safari javascript browsers […]
September 28th, 2006 at 7:39 am
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).
October 27th, 2006 at 6:41 am
[…] 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 […]
October 30th, 2006 at 10:48 pm
[…] r-mouseovers tree folder drag css youhua css layout control cool web start dontclick js debug ibox 漂亮的box效果 Entry Filed under: 个人门户 Leave a Comment […]
December 19th, 2006 at 11:53 pm
[…] , welche Styles auf dieses Element vererbt werden und vieles mehr. Drosera Drosera ist zum einen der lateinische Name f […]
December 22nd, 2006 at 8:18 am
[…] 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 […]
January 19th, 2007 at 8:42 pm
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…
January 20th, 2007 at 10:58 am
[…] 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 […]
March 25th, 2007 at 6:52 pm
[…] ��る人にはかなり便利かもしれない。 ダウンロードしとこっと。 Surfin’ Safari - Blog Archive » Introducing Drosera ちなみに、「debugger」をずっと「デバ� […]
April 25th, 2007 at 5:28 pm
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 ?
May 2nd, 2007 at 6:50 pm
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.
May 4th, 2007 at 11:59 pm
[…] .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 […]
May 9th, 2007 at 12:37 pm
This has been in WebKit for a year now.
When will it be available in Safari?
May 9th, 2007 at 4:38 pm
[…] 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 […]
May 28th, 2007 at 1:22 am
[…] 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 […]
June 11th, 2007 at 9:21 am
And some else, come here……
The most interest!…
June 11th, 2007 at 12:44 pm
[…] 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. […]
June 20th, 2007 at 8:20 am
[…] 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 […]
June 21st, 2007 at 5:54 am
[…] 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 […]
June 22nd, 2007 at 1:21 pm
[…] Introducing Drosera […]
June 23rd, 2007 at 6:14 am
[…] Drosera: WebKit/Safari JavaScript Debugger. […]
July 24th, 2007 at 11:55 am
[…] examples of inspection and debugging tools include Firebug, TamperData, SquareFree Shell, Drosera, Microsoft Script Editor, etc, etc, […]
August 26th, 2007 at 12:09 pm
[…] Test and debug using Safari 3.0 on the desktop using the Element Inspector feature and Drosera third-party […]
September 9th, 2007 at 1:25 pm
[…] Run the script in terminal as shown here and here for Drosera. […]