아래의 javescript들은 Safari 책갈피 막대의 책갈피 링크 주소에 저장해 놓고, 웹 페이지를 개발하는 데 유용하게 사용될 수 있는 작은 JavaScript로 된 책갈피 도구들(bookmarklets)입니다.
JavaScript 관련
Scripts 보기 - 현재의 페이지에 있거나, 혹은 연결되어 있는 모든 JavaScript들을 포함하고 있는 창을 새로 표시함(Framesets은 지원 안함). document.all, document.layers 등과 같은 지원되지 않는 DOM 요청들을 확인할 경우 사용하십시오.
javascript:var%20jsArray%20=%20document.getElementsByTagName(%22script%22);%20var%20theWinref;%20var%20theHTML;%20var%20scriptObj;%20var%20frameURL;%20var%20frameObj;if(jsArray.length%20%3E%200)%20%7B%20theWinref%20=%20window.open('','_blank','width=320,height=255,toolbar=no,location=no,directories=no,status=yes,menubar=no,resizeable=yes');%20theWinref.document.write('%3Chtml%3E%3Chead%3E%3Ctitle%3E'%20+%20window.location.href%20+%20'%3C/title%3E%3C/head%3E%3Cbody%3E'+%20jsArray.length+'%20Script(s)%20Found:');%20theWinref.resizeTo(600,200);theWinref.moveTo(0,0);%20%7D%20for%20(var%20i%20=%200;%20i%20%3C%20jsArray.length;%20i++)%20%7B%20scriptObj%20=%20jsArray%5Bi%5D;%20if(scriptObj.hasAttribute(%22src%22))%7B%20frameURL%20=%20scriptObj.getAttribute(%22src%22);%20theWinref.document.write(%22%3Cp%20style='background-color:%23999933;'%3EScript%20%22+eval(i+1)+%22%20via%20%22%20+%20frameURL%20+%20%22%3Cbr%3E%3Ciframe%20height='100%25'%20width='100%25'%20id='url%22+%20i%20+%20%22'%20src='%22%20+%20frameURL%20+%20%22'%3E%3C/iframe%3E%3C/p%3E%22);%20frameObj%20=%20theWinref.document.getElementById(%22url%22%20+%20i);%20%7D%20else%20%7B%20theHTML%20=%20scriptObj.innerHTML;%20theWinref.document.write(%22%3Cp%20style='background-color:%23999933;'%3EScript%20%22+eval(i+1)+%22:%3Cbr%3E%3Cpre%3E%22%20+%20theHTML%20+%20%22%3C/pre%3E%3C/p%3E%22);%20%7D%20%7D%20if(jsArray.length%20%3E%200)%20%7B%20theWinref.document.write('%3C/body%3E%3C/html%3E');%20%7D
특정 Scripts 실행 - 현재의 페이지 안에서 특정 JavaScript를 실행시킬 수 있게 하는 입력 대화상자를 표시함.
javascript:var%20c='document.location.href',r='';while(c=prompt(r+'Enter%20the%20code%20to%20be%20executed:',c)){try{r='Returned:%20'+eval(c)+'n';}catch(err){r='Error:%20'+err.message+'n';}}
배치 관련
테이블 보기 - 모든 테이블들의 열과 행의 테두리를 표시해 줌. 이것은 테이블들이 적당한 형태로 잘 자리잡고 있는지를 확인할 때 유용합니다.
javascript:var%20f=function(tt,col){var%20a=document.getElementsByTagName(tt);for(var%20b=0;b%3Ca.length;b++){a[b].style.border='1px%20solid%20%23'+col;}};f('table','00F');f('td','0F0');f('th','0FF');
DIV 테두리 보기 - 현재의 페이지에 있는 DIV 요소들 주위에 테두리를 표시해 줌.
javascript:var%20a=document.getElementsByTagName('div');for(var%20b=0;b%3Ca.length;b++){a[b].style.border='1px%20solid%20%23F00';}
DIV 테두리와 해당 ID 보기 - 현재의 페이지에 있는 DIV 요소들 주위에, 테두리와 함께 해당 ID를 표시해 줌.
javascript:var%20a=document.getElementsByTagName('div');var%20aspan;var%20txtNode;for(var%20b=0;%20b%20%3C%20a.length;b++){%09a[b].style.border='1px%20solid%20red';%09%09if(a[b].id%20!=%20''){%09%09aspan%20=%20document.createElement('span');%09%09aspan.setAttribute('id',%20't_ttp'%20+%20a[b].id);%09%09aspan.setAttribute('style',%20'position:relative;top:1px;left:1px;%20margin:10px%200px%200px%2010px;background-color:%20beige;max-width:220;padding:%202px%2010px%202px%2010px;border:%201px%20solid%20%23C0C0C0;font:%20normal%2010px/12px%20verdana;color:%20%23000;text-align:left;display:%20block;');%09%09txtNode%20=%20document.createTextNode('div:%20'%20+%20a[b].id);%09%09aspan.appendChild(txtNode);%09%09a[b].appendChild(aspan);}}
Outline 테두리 보기 - 현재의 페이지에 있는 HTML 요소들의 Outline을 표시해 줌. 여기서 보여지는 테두리(CSS Outline)는 일반 테두리(Border)와 달리 공간을 차지하지 않고 객체들의 테두리 위에 그려지게 됩니다.
javascript:(function()%7B%20function%20mark(elem)%20%7B%20if(elem.style)%20%7B%20elem.style.outline=%221px%20solid%20green%22;%20%7D%20%7D%20;%20function%20recurse(elem,p)%20%7B%20var%20i,%20k,%20cn;%20if(!elem)%20%7B%20alert(%22null%22);%20return;%20%7D%20mark(elem);%20cn%20=%20elem.childNodes;%20if(cn)%7B%20k%20=%20cn.length;%20for%20(i%20=%200;%20i%20%3C%20k;%20i++)%20%7B%20recurse(cn%5Bi%5D,%20p%20+%20%22.%22%20+%20i);%20%7D%20%7D%7D%20recurse(document,%22d%22);%20%7D)();
현재의 페이지안에 포함된 그림들을 새 창에서 보기 - 현재의 페이지안에 있는 모든 그림들을 새 창을 열어서 따로 보여 줌.
javascript:if%20(false)void('View%20images%20script%20by%20Tantek%20Celik%20-%20modified%202003.02.11');var%20n%20=%20(window.location.toString().replace(/[^a-z0-9]/gi,'_'))+'_im';var%20sn%20=%200,ud,i=0,r='/r';var%20ss%20=%20r;l=document.images.length;if%20(l==0)%20alert('No%20images%20to%20see%20here.%20Move%20along.');else%20for%20(i=0;i%3Cl;i++){var%20s%20=%20document.images[i];var%20u%20=%20s.src;if%20(u!=''%20&&%20u!=ud%20&&%20ss.indexOf(r+u+r)==-1){%20ss+=u+r;sn++;var%20w=window.open(s.src,n+sn,'height='+Math.max(s.height,32)+',width='+Math.max(s.width,32)+',status=no,location,menubar,resizable,scrollbars');w.focus();}}void(20030211);
Web 표준 확인
현재의 페이지 HTML 표준 확인 - HTML 표준 확인을 위해 현재의 URL을 W3로 보내 줌. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.
javascript:void(document.location='http://validator.w3.org/check?uri='+document.location);
현재의 전체 웹 사이트 HTML 표준 확인 - 전체 웹 사이트의 HTML 표준을 확인함.
javascript:void(document.location='http://htmlhelp.com/cgi-bin/validate.cgi?url='+document.location+'&warnings=yes&spider=yes');
현재의 페이지 CSS 표준 확인 - CSS 표준 확인을 위해 현재의 URL을 W3로 보내 줌. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.
javascript:void(document.location='http://jigsaw.w3.org/css-validator/validator?uri='+document.location);
현재 페이지의 Links (HREFs) 표준 확인 - Link 표준 확인을 위해 현재의 URL을 W3로 보냄. 여기서 URL은 방화벽 밖에서도 잘 보여야 합니다.
javascript:void(document.location='http://validator.w3.org/checklink?url='+document.location);
Feed(ATOM, RSS) 표준 확인 - Feed를 Feed Validator에서 표준 확인. 여기서 Feed URL은 방화벽 밖에서도 잘 보여야 합니다.
javascript:window.open('http://feedvalidator.org/');
창 크기 조절
PocketPC iPaq 240x320 - 창 크기를 230x320 pixels 크기로 조절.
javascript:void(window.resizeTo(240,320));
TV safe 544x372 - 창 크기를 544x372 pixels 크기로 조절.
javascript:void(window.resizeTo(544,372));
VGA 640x480 - 창 크기를 640x480 pixels 크기로 조절.
javascript:void(window.resizeTo(640,480));
SVGA 800x600 - 창 크기를 800x600 pixels 크기로 조절.
javascript:void(window.resizeTo(800,600));
XGA 1024x768 - 창 크기를 1024x768 pixels 크기로 조절.
javascript:void(window.resizeTo(1024,768));
SXGA 1280x1024 - 창 크기를 1280x1024 pixels 크기로 조절.
javascript:void(window.resizeTo(1280,1024));
UXGA 1600x1200 - 창 크기를 1600x1200 pixels 크기로 조절.
javascript:void(window.resizeTo(1600,1200));
이것들 외에도 Web 개발에 도움이 될 만한 Safari 관련 유용한 정보들을 아래의 곳에서 얻으실 수 있습니다.
Apple 개발 문서 - Safari에 대해 자주 묻게 되는 질문들과 답변
위와 비슷한 기능들을 Safari의 메뉴에 따로 추가해서 사용할 수 있게 하는 도구로 Safari WebDevAdditions 그리고, Safari에 표시되어 있는 현 웹 페이지를 해부해서 CSS 분석 및 편집을 용이하게 해 주는 Xyle scope를 추가하면 Safari에서 훌륭한 웹 개발 환경을 갖출 수 있을 것 같습니다.
또한, Mozilla Firefox를 사용하시는 분들은 비숫한 기능의 도구 막대를 추가해 주는 Web Developer Extension도 있네요. 이것도 CSS의 실시간 편집이 가능합니다.