태그 보관물: Chrome

크롬 브라우저에서 새 탭 열 때 개발자도구 같이 열기

크롬 브라우저로 디버깅하다 링크를 클릭하여 새로운 탭이 열릴 때 개발자도구를 다시 열어야 하는 불편함이 있습니다.
아래와 같이 설정을 해주면 새 탭을 열 때 개발자도구도 같이 띄울 수 있습니다.

1. 개발자 도구 우상단 설정 버튼 클릭
2. 메뉴에서 Settings 선택
3. Preferences 탭 선택
4. DevTools 영역의 Auto-open DevTools for popups 선택

단, _blank로 타겟이 지정된 탭을 링크를 클릭해서 열 때만 적용됩니다.
직접 새 탭을 열거나, 일반 링크를 Ctrl 클릭해서 새 탭으로 여는 경우는 해당되지 않는데, 이건 좀 불편하네요.

크롬에서 cjs로 AngularJS 디버깅하기

AngularJS는 변수나 함수들이 외부로 노출되지 않아 디버깅 하기 어려운 점이 있죠.
그래서 이것저것 시험해 보다 찾아낸 크롬 브라우저의 확장 프로그램 Custom JavaScript for websites을 사용하면 매우 편합니다.

Custom JavaScript for websites (크롬 웹스토어)

사용법은 간단합니다. 적용할 사이트로 이동해서 cjs를 실행하면 다음과 같은 화면이 나오는데, 여기에 원하는 코드를 입력하고 저장해 주세요. 그러면 해당 사이트의 페이지를 열 때마다 입력한 스크립트가 자동으로 실행됩니다.

cjs

여기에 콘솔에서 AngularJS의 스코프, 서비스 등 접근하기 글에서 사용한 코드를 입력하면, 브라우저의 콘솔에서 $scope.myProperty 라던가 $scope.myFunction() 같이 스코프나 서비스 객체에 접근이 가능합니다.

코드 복사해서 사용할 수 있도록 추가해 놓아요.

1
2
3
4
5
6
7
8
9
10
11
12
13
function angularScope(){
    try{
        $scope = angular.element(document.body).scope();
        injector = angular.element(document.body).injector();
        $window = injector.get("$window");
        $timeout = injector.get("$timeout");
        $http = injector.get("$http");
        $location = injector.get("$location");
        myService = injector.get("myService");
    }catch(e){}
}
 
setTimeout(angularScope, 1000);

크롬에서 opacity transition 사용할 때 레이어가 사라지는 문제

지금 진행하고 있는 프로젝트에서, 화면 하단에 고정된 레이어를 만들고, 경우에 따라 화면 아래로 사라졌다 나타나는 효과를 적용하였습니다.

1
2
3
.fixed_button_wrap{position:fixed;left:0;bottom:0;width:100%;height:45px;opacity:1;
    transition:bottom 0.3s, opacity 0.3s;}
.fixed_button_wrap.hide{pointer-events:none;bottom:-50px;opacity:0;}

테스트한 단말과 브라우저들에서는 모두 정상적으로 표시되었으나, 일부 안드로이드(크롬)에서 한 번 사라진 레이어가 다시 나타나지 않는 문제가 발견되었습니다. 디버깅 해보면 좌표와 투명도는 모두 정상으로 나타나지만, 화면에는 보이지 않더군요.
해결책은 -webkit-backface-visibility:hidden;를 추가해 주어야 합니다.

1
2
3
.fixed_button_wrap{position:fixed;left:0;bottom:0;width:100%;height:45px;opacity:1;
    transition:bottom 0.3s, opacity 0.3s;-webkit-backface-visibility:hidden;}
.fixed_button_wrap.hide{pointer-events:none;bottom:-50px;opacity:0;}

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

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

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

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

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

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

iPad 음악 앱, 아티스트 목록 따라하기

아이패드의 음악 앱에서 아티스트 목록으로 가서 가수를 선택하면, 해당 가수의 앨범 목록이 나옵니다.
위아래로 스크롤을 해보면 앨범 제목과 커버자켓 이미지가 스크롤영역 상단에 고정되어 보이죠. 이걸 jQuery를 사용해서 만들어 봤습니다.

iPad 음악, 아티스트 목록

다음의 기기 및 브라우저를 지원합니다.
PC의 파이어폭스, 크롬, 사파리 완벽 지원(jQuery 사용)
IE9, 오페라 부분 지원(iScroll을 사용하여 기능 구현)
iOS 기기(iPhone 3GS 이전, iPad 오리지널 제외) 부분 지원(iScroll을 사용하여 기능 구현)
IE8 이전 버전 미지원
안드로이드 미지원

파이어폭스, 크롬 및 사파리의 경우 jQuery와 scroll 이벤트를 사용하면 이상없이 잘 동작합니다.

그러나 IE9와 오페라의 경우에는 화면 상단에서 레이어가 떨리는 현상이 발생하기 때문에 iScroll을 사용해서 동작하도록 구현 했습니다. 이때 iScroll에 scroll 이벤트가 없고, 휠 스크롤의 거리 등의 문제로 인해, iScroll 4에 약간 수정을 가한 파일을 사용했습니다.

IE8 이전 버전은 iScroll에서 지원하지 않으므로 제외했습니다.

iOS 기기도 대부분 iScroll을 통해 지원하지만, 일부 구형 모델은 속도 문제로 지원하지 않습니다.

안드로이드는 갤럭시 S3, 넥서스원, 베가 등의 단말에서 테스트 해 봤는데, 문제가 많아서 제외시켜 버렸습니다. jQuery로 제어하면 상단 레이어가 떨리고, iScroll을 사용하면 속도가 느려지는 등 많은 문제들이 생기네요. 게다가 단말기 마다 차이가 나고, 한 기기에서도 브라우저 별로도 다르게 동작하는 등 문제가 있습니다.

IE10 이상 및 윈도우 모바일 등 위에 언급되지 않은 환경에서는 테스트 해보지 못했습니다. 혹시 확인해 보실 수 있으면, 댓글로 결과 알려주세요.

ps. 정말, 웹 작업을 하다보면 IE가 개판이라고 몸소 느끼지만, 모바일 작업을 해보면 안드로이드도 이에 뒤지지 않는다는 사실을 절감하게 되는군요.