Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Testing using Safari while developing websites Web Browsers
I use Safari and jEdit to develop my HTML and PHP websites. Some hints and tips I have found that help make me work efficiently:

Dual Screens
I put my editor on one screen, with Safari on the other. Flicking between them is much faster. Also it's great to have my database (mysql in Terminal), designs I'm working from (Freehand) and the resultant page (Safari) in view while I'm typing code.

Use click-through for faster developing
Switching between text editor and web browser is often repeated many times when developing a web page. I use "click-through" to refresh my web browser page, without bring Safari to the front. Hold Command and use the mouse to click on the refresh icon. The advantage is the caret remains active and in place in my editor and there is no delay bringing windows to the front.

Assign "Command Click" to a button on mouse
I have attached "Command click" to my scroll wheel button on my mouse for several benefits. The "click through" mentioned above is even easier. A middle click on a link will open it in new tab. Moving, resizing and even scrolling windows around behind other windows is handy.

Leave Cookies view open
When developing Cookies, I have found Safari will let you leave the cookies panel open while working. Find Safari->Preferences->Security and choose "Show Cookies". I normally clear out all cookies before starting so I can see the ones I am working on. This panel is dynamically refreshed, so its so easy to see if cookies are being set or not, and what to.

I hope this gives other developers ideas.

robg update 10/27: At the author's request, I changed the original references to "option clicks" to the correct "command clicks."

    •    
  • Currently 2.33 / 5
  • 1
  • 2
  • 3
  • 4
  • 5
  (3 votes cast)
 
[7,754 views]  

Testing using Safari while developing websites | 21 comments | Create New Account
Click here to return to the 'Testing using Safari while developing websites' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Testing using Safari while developing websites
Authored by: nmthor1 on Oct 21, '03 10:53:34AM

Thanks for the hints! I wish I had space for a second monitor though :)

Question: How did you assign "option-click" to the scroll wheel on your mouse?



[ Reply to This | # ]
Testing using Safari while developing websites
Authored by: cteselle on Oct 21, '03 12:35:09PM

If you have a micro$oft mouse, you can use the micro$oft mouse system preference to set this up. There are probably other utilities to do this if you have a mouse from another manufacturer



[ Reply to This | # ]
assigning mouse buttons
Authored by: garbanzito on Oct 21, '03 01:29:20PM

perhaps there's a hint on this elsewhere, but the first assumption is that the scroll wheel has a "click" action.. if it does, the mouse driver may have an option to designate what happens when clicked.. if the driver doesn't, try USB Overdrive, which allows very flexible button assignment



[ Reply to This | # ]
Testing using Safari while developing websites
Authored by: explosivo on Oct 21, '03 11:11:14AM

I think you meant "Command-Click" for click thru... I can't say I know for sure how click-thru works on Jag, but "command-Click" is used on panther...



[ Reply to This | # ]
It's command-click
Authored by: cello on Oct 21, '03 11:52:46AM

In Jaguar too it's command-click. Option-clicking will hide the current app when switching applications by clicking in a window... and we don't want the editor to hide, do we? ;-)



[ Reply to This | # ]
Command not Option
Authored by: bromhead on Oct 21, '03 08:10:31PM

Apologies, I did mean Command click and not Option click.



[ Reply to This | # ]
Safari tips for developers page at ADC
Authored by: dave2003 on Oct 21, '03 11:53:54AM

There's an informative article on how the Safari browser behaves from a development standpoint, with JavaScripts that highlight features of the Safari browser at the 'Safari Tips for Web Developers' page here : (just published on 16 Oct)

http://developer.apple.com/internet/safaricustom.html



[ Reply to This | # ]
Testing using Safari while developing websites
Authored by: dansroka on Oct 21, '03 12:06:44PM

I am new to jEdit -- is there a plug-in available that will send the location of the current buffer into Safari?



[ Reply to This | # ]
Testing using Safari while developing websites
Authored by: raster on Oct 21, '03 02:03:56PM
Check the macros at the jEdit Community site.

[ Reply to This | # ]
Testing using Safari while developing websites
Authored by: dansroka on Oct 23, '03 01:21:34PM

Thanks, but I couldn't find anything that would work. I'm sure someone out there uses jEdit for php or html and have a tool that lets them preview in Safari. Anyone?



[ Reply to This | # ]
Scroll-click
Authored by: scaryfish on Oct 21, '03 04:21:58PM
Actually, the default behaviour (using the built-in mouse drivers) is that clicking the scroll wheel acts as a command-click. Sort of.

If you are in another app, scroll-clicking can do stuff to the background app without activating it. However, scroll-clicking on a folder in the bookmarks bar does not open all those bookmarks in tabs, like command-clicking does. Also, scroll-clicking on the title of a window in the Finder doesn't display the menu with all the parent folders, like command-clicking does.

---
=)


[ Reply to This | # ]

Try subethaedit
Authored by: wgscott on Oct 21, '03 04:29:46PM

I used to use Jedit and Safari like that.

Then I found SubEthaEdit (formerly Hydra). It has its own web page renderer that auto-updates as soon as you make a change in the HTML code. You don't even have to save it.

After 5 minutes I never went back to jEdit, which I really liked. This is just much nicer, and OS X native.

http://wwwbruegge.in.tum.de/projects/hydra/subethaedit/



[ Reply to This | # ]
Try subethaedit
Authored by: trekan on Oct 21, '03 04:44:39PM

Actually the HTML renderer is the same that Safari uses.

Before using SubEthaEdit I used the Snippet Editor in Safari to test HTML code, but it's just nicer in SubEthaEdit.



[ Reply to This | # ]
Absolutely
Authored by: JoeHope on Oct 21, '03 07:26:39PM

Can't agree more. I used to use Alpha in the old days, jEdit more recently, but haven't looked back since SubEthaEdit. Very nice editor for programming and XML, and, oh, everything.

SubEthaEdit's unique feature, the ability to collaboratively edit files over Rendevous was also absolutely brilliant when I was writing our latest homepage. I shared all the files and got everyone in the department to add in their own content. No multiple versions, no cutting and pasting for me. They could preview the files straight out of the editor. You don't often need this feature, in which case SubEthaEdit is just the cleanest, best editor out there. When the sharing feature is appropriate, it's fantastic.



[ Reply to This | # ]
Try subethaedit
Authored by: bromhead on Oct 21, '03 08:51:06PM
SubEthaEdit looks cool and I would love to use a cocoa based app. I like the built in browser and we should see more apps use this due to "webcore". Would love if you could flick between the page and the code (like Dreamweaver). Also I don't think it can look at the file through the web server (http:// vs file://) which means it's not much good for dynamic languages, only plain html. Looks great for collaboration.

It is missing a few things I like to use in jEdit:

  • Tabs - flick between the documents I'm working on (jEdit plugin "bufferTabs")
  • File Browser - instant access to all project files
  • Auto completion - when I type an opening tag it types the closing tag (TextExtras perhaps?) (jEdit plugin "XML")
  • Its Free! www.jedit.org
Dreamweaver MX is very close but is far too slow, still inserts "stuff" into my code (haven't tried new version yet)

Project Builder is almost perfect too - fast, file browser, but lacks auto completion and very limited support for PHP. Can use single window or multiple depending on taste

Homesite on the PC is about the best editor I have used however thats not much use now is it!

I'm just about to try "TextExtras" maybe that will add code completion to Cocoa apps...

Any other ideas/comments?

[ Reply to This | # ]

Huh?
Authored by: stewby on Oct 21, '03 09:45:09PM

Would love if you could flick between the page and the code (like Dreamweaver)

How is toggling back and forth better than having both at once?

It is missing a few things I like to use in jEdit:
Its Free! www.jedit.org

You mean, free just like SubEthaEdit? It's not missing the "free" feature at all.



[ Reply to This | # ]
Huh?
Authored by: bromhead on Oct 21, '03 10:22:02PM

Sorry I didn't mean to imply SubEthaEdit isn't free.

> How is toggling back and forth better than having both at once?

Sometimes it is great to have everything in one window, however other times it is good to have multiple windows. Some might like two windows if dual screening for instance. With one screen I would prefer to have 1 window allowing maximum screen real estate for my code.

Almost all apps that support tab systems also support separate windows. eg. jEdit, projectBuilder and Safari, thus letting users choose what they prefer.



[ Reply to This | # ]
Huh?
Authored by: foobar104 on Oct 22, '03 01:01:57AM
With one screen I would prefer to have 1 window allowing maximum screen real estate for my code.

ExposÚ is going to change your life.

[ Reply to This | # ]

Huh?
Authored by: suthercd on Oct 22, '03 08:59:48AM

foobar--

I've used 10.3 since the end of June, but mainly for testing for the ADC. Expose┬┤ look great- could you go into a bit of detail abot how you use it in this instance to help your workflow.

Thx
Craig



[ Reply to This | # ]
Taco HTML Edit
Authored by: dzurn on Oct 23, '03 05:11:53PM
I like the freeware "Taco HTML Edit". It is great for raw HTML editing, great edit/preview arrangement, and best of all my wife can use it to write her web pages with both English and Japanese text from a template I made for her.

I also use AlphaX for my in-depth stuff, but Taco HTML Edit is such a nice small app that works for 95% of what I look for.

Darryl

From http://www.tacosw.com/features.html

  • Customizable tag coloring
  • Tag coloring is multithreaded
  • "Code Clips" let you keep track of frequently used HTML code
  • Choose any browser for the preview browser
  • Includes a menu for quick previewing in Internet Explorer, Netscape, OmniWeb, or Opera
  • Word Wrap can be turned on or off
  • Choose any font from the system font panel when displaying your code
  • Allows you to create new documents with the code from an existing file
  • Save with any file extension, and set your own default file extension
  • Supports printing
  • Includes a customizable toolbar with a show/hide option
  • Includes wizards for inserting colors, font tags, image tags, image maps, links, lists, meta tags, and tables
  • The image map wizard is very easy to use, yet it is very powerful
  • Includes a quick insert item in the toolbar for common text appearance tags

---
Madness takes its toll.
Please have exact change.

[ Reply to This | # ]

Testing using Safari while developing websites
Authored by: Angus on Oct 25, '03 03:09:31PM

I'll have to try that Command-click refresh thing. I have already assigned comd-click to the right mouse button anyway, which I mostly use for opening links in Safari in new tabs. It operates as a double-click in the Finder.

Another handy Safari window to leave open is the Activity window. I'll sometimes leave it open to test preload javascripts and to test for missing images. It shows a list of all images, scripts, stylesheets that the page loads, and shows if they didn't load correctly. It updates on the fly as you activate mouseovers, so you can easily see if some didn't preload.



[ Reply to This | # ]