Rev. 2.73

위 표는 마켓쉐어에서 제공하는 최근 2년간의 브라우저 트렌드 입니다. 장난삼아 위 그래프를 근거로 향후 8년간의 가상 트렌드를 만들어 보았습니다. MS가 이 현상을 계속 방치한다면 6년 후인 2014년이 되는 해에 파이어폭스가 IE를 추월하는 그림이 그려지게 됩니다.

2년간의 점유율을 근거로 한 것이기 때문에 구글크롬 브라우저의 변화를 넣지 못한 것이 아쉽습니다만, 가장 유력하게 발생할 수 있는 이변은 바로 크롬일 것으로 생각됩니다. 놀랍게도 크롬은 시작부터 0.78%의 점유율로 무섭게 브라우저 시장을 잠식하고 있습니다. 탄생한지 12년이나 흐른 지금의 오페라 브라우저 점유이 고작 0.69%이기 때문입니다. 이 기세라면 IE가 추월당하는 시기가 더욱 앞당겨 지지 않을까요? 크롬의 선전을 기대합니다.

Comments

console.png

클라이언트 사이드 웹개발에 유용하게 사용되는 자바스크립트 디버그 콘솔은 더이상 없어서는 안될 매우 중요한 요소가 되었습니다. 최근에는 브라우저 자체적으로 디버그 콘솔을 제공하거나 부가 기능으로 제공하여 개발을 이롭게하고 있습니다. IE에서도 이와 비슷한 Companion.JS라는 플러그인이 있지만 파이어버그보다는 다소 기능이 떨어지거나 사용법이 다르고 특히, 변수 출력의 디테일면에서 차이를 보이기 때문에 사용하는데 불편함이 있었습니다. 그래서 자바스크립트를 이용한 자바스크립트 디버그 콘솔을 만들게 되었습니다.

Prototype 기반이고, 파이어버그의 콘솔과 유사하게 만들려고 노력했습니다, 타입이 object인 경우 이를 분석하여 배열/노드/객체를 구분하고, 커맨드 라인을 사용할 수 있으며, 약소하지만 Ajax 통신하는 모습을 모니터링 할 수도 있어요. 단점은 콘솔의 호출 수와 작동 속도가 반비례 한는 것입니다. 호출이 많을수록 브라우저의 작동속도가 떨어지는 것이죠. 때문에 개발과정에서만 사용하는 것을 권장하며, 되도록이면 간격을 두어 콘솔을 호출하는 것이 좋습니다. console.js는 아래와 같은 방법으로 응용할 수 있습니다.

<script type="text/javascript">
  if (Prototype.Browser.IE && !window.console) 
    document.write('<script type="text\/javascript" src="console.js"><\/script>');
</script>

<script type="text/javascript">
  (function() {
    var set = function(type) {
      var func = (typeof console != 'undefined' && typeof console.log != 'undefined')?
        !!(console[type])? console[type] : console.log : Prototype.emptyFunction;
      /* fix for the firebug less than or equal to version v1.1 */
      return (typeof func.bind == 'function') ? func.bind(console) : func; 
    };
    ["debug", "log", "info", "warn", "error"].each(function(type, i) {
      (i)? debug[type] = set(type) : debug = set(type);
    });
  })();
</script>

위 코드는 제가 즐겨 사용하는 디버그 콘솔 호출 함수입니다. debug 함수를 만들어 사용하는데 파이어버그 콘솔 API를 따르는 디버그 콘솔을 제공하는 대부분의 브라우저들(파이어폭스, 크롬, 사파리 등)에서 사용할 수 있습니다. console 메서드들을 오버라이딩하여 사용하는 방식으로 통합적으로 사용할 수 있게 만든 것이죠. 물론 console.log 메서드를 그대로 사용해도 무방합니다.

다운로드 :

* original - console.js (14.1kb)
* minified - console.js (10.1kb)

업데이트 :

* 2008.10.08 - IE6에서도 Ajax 통신을 모니터링 할 수 있습니다.
* 2008.10.08 - Object 분석 결과 처리가 개선되었습니다.
* 2008.10.08 - Ajax 통신에 소요된 시간을 표시합니다.
* 2008.10.09 - Ajax 통신 결과물(responseText)을 표시합니다.
* 2008.10.09 - Ajax 통신 상황(status)의 오류를 표시합니다.
* 2008.10.10 - 자동으로 스크롤 위치를 계산합니다.

Comments

파이어버그가 배타딱지를 때고 1.2 안정(stable)버전을 내 놓았군요. 1.3 알파버전으로 업데이트 작업이 이어지고 있습니다. 여전히 콘솔에 라인넘버가 출력되지 않는 오류는 유효한 상태입니다. 아무래도 파이어버그 측은 이를 해결해 줄 것으로 보이지 않습니다. 1.2버전 이하에서는 콘솔(console.log) 함수를 호출한 시점의 파일명과 라인넘버를 표시할 수 있게 되어 있었는데, 이제 더이상 출력되지 않게 된 것이죠. 디버깅할 때 라인넘버가 표시되는 것은 여러모로 유용합니다. 오류가 발생했을 때 해당 파일명과 라인넘버가 출력되어 오류를 쉽게 추적하는 것과 비슷하죠. 그래서 파일명과 라인넘버의 링크가 다시 표시될 수 있게 했습니다. 수정할 부분은"{확장기능 경로}\content\firebug\consoleInjector.js"파일의 308라인에 위치한 getComponentsStackDump 함수를 아래처럼 수정하면 콘솔의 라인넘버를 표시하고 추적할 수 있습니다.

변경 전

    function getComponentsStackDump()
    {
        // Starting with our stack, walk back to the user-level code
        var frame = Components.stack;
        var userURL = win.location.href.toString();

        // Drop frames until we get into user code.
        while (frame && FBL.isSystemURL(frame.filename) )
            frame = frame.caller;
        
        // Drop two frames to get back to the point of call for eg console.log()
        if (frame)
            frame = frame.caller;
        if (frame)
            frame = frame.caller

        return frame;
    }

변경 후

    function getComponentsStackDump()
    {
        // Starting with our stack, walk back to the user-level code
        var frame = Components.stack
        var userURL = win.location.href.toString(); 
        var hostURL = win.location.host.toString();

        // Drop frames until we get into user code.
        for (var skip = true; frame; frame = frame.caller) {
            var test = !FBL.isSystemURL(frame.filename) && 
                       !userURL.match(frame.filename) &&
                       frame.filename.indexOf(hostURL) != -1
            if (test && !skip) break;
            if (test) skip = false;
        }

        return frame;
    }

Comments