태그 보관물: Web Developer Toolbar

페이지 리프레시 없이 CSS만 리로드하기

웹페이지 개발할 때 CSS 수정하고 확인을 위해서 수시로 페이지 리프레시를 하다보면 무척 귀찮습니다. 더욱이 AJAX를 사용하는 경우에는, 작업중인 화면을 보기 위해 여러 번 클릭을 해서 들어가야 하는 번거로움도 있고요.
이럴 때 편하게 페이지 리프레시 없이 CSS만 다시 불러올 수 있는 방법을 소개합니다.

파이어폭스의 부가기능(도구 > 부가기능) 메뉴로 들어가서, “CSS”로 검색을 해보면 다양한 플러그-인 들을 찾을 수 있습니다.
css reloader search result

이 중에서 마음에 드는 녀석을 골라서 사용하면 되겠습니다.
물론 크롬에도 비슷한 부가기능 들을 쉽게 찾을 수 있습니다.

그런데, 이미 Web Developer Toolbar를 사용하고 있다면, 굳이 새로운 플러그-인을 설치할 필요가 없습니다.
웹 디벨로퍼 툴바에서 CSS > Reload Likned Style Sheets 메뉴를 실행하면, 페이지를 새로고침하지 않고 CSS 파일만 새로 불러와서 수정된 내용을 바로 확인 할 수 있습니다.

그러나 매번 두 번씩 클릭을 해야하는 것이 여간 불편한 것이 아닙니다. 이 점에 대해서도 대비책이 있는데, 그것은 바로 단축키를 지정하는 것입니다.
페이지 리프레시 없이 CSS만 리로드하기 더보기

Web Developer Toolbar’s Display Object Information

파이어 폭스의 익스텐션 중에서 웹 디벨로퍼 툴바의 기능 중 플래시 디버깅에 유용한 기능이 있어서 소개합니다.
Information > Display Object Information 메뉴를 선택하면, 플래시 오브젝트의 태그를 화면에 디스플레이 해 줍니다. 물론 소스보기를 통해서도 확인할 수 있는 내용이지만, 원하는 부분을 쉽게 찾기 어렵죠. 게다가 자바스크립트를 통해서 입력된 경우에는 더욱 그렇고요. 위 기능을 사용하면 매우 편리합니다.
There is a useful feature in Web Developer Toolbar extension for FireFox. If Display Object Information menu is activated, Flash objects’ tags are displayed on the screen. It is useful when you debug your Flash applications.
FireFox用Web Developer Toolbarの中でデバッグする時役に立つ機能があります。Display Object Informationメーにュを実行すると、フラッシュオブゼクトのタグを示します。デバッグする時、有用なものです。