크롬 개발자도구와 페이지 소스 보기에서 보이는 코드의 차이점 분석

안녕하세요. 드리머즈입니다.

오늘 HTML 관련해서 또 하나를 배웠네요.

저는 크롬 개발자 도구의 Elements에서 확인 가능한 코드와 (위 사진)

개발자 도구를 켜기 위해서는 크롬 우측 상단의 세로 점 3개 버튼을 클릭 > 도구 더보기 > 개발자 도구(D) 클릭하면 됩니다.

홈페이지에서 마우스 우클릭 > 페이지 소스 보기(V)에서 보이는 코드가 똑같을 거라고 생각했습니다.

그런데 두 화면에서 보이는 코드는 다른 코드네요. 간단한 코드를 보여줄 때는 똑같을 수도 있지만 개념?이 다르다고 봐야겠습니다.

제가 볼 때, 페이지 소스 보기(V)에서 보여지는 코드는 서버로부터 전달받은 코드이며

개발자 도구의 Elements에서 확인 가능한 코드는 서버에서 전달받은 코드에서.. javascript등?을 실행하여 변환된 코드입니다.

제 블로그 하단부에 보이는 카테고리의 다른 글 부분을 확인해보겠습니다.

개발자 도구 > Elements에선 위 사진의 코드가 카테고리의 다른 글에 해당하는 코드입니다.

그리고 위 코드의 빨간색 영역이 페이지 소스 보기(V)에서 카테고리의 다른 글에 해당합니다.

두 코드가 비슷한 것 같지만 약간 다릅니다.

<h4>'<a href="/category/블로그">블로그</a> > <a href="/category/블로그/스킨">스킨</a>' 카테고리의 다른 글</h4>

서버에서 전달받은 위의 377라인 코드가

<h4>
    <a href="/category/블로그" class="alv-one has-sub-alv">블로그</a>
    <a href="/category/블로그/스킨" class="alv-two">스킨</a>
    <span class="txt-bar"></span>
    <span class="lv-txt">카테고리의 다른 글</span>
</h4>

위처럼 변경되서 사용자에게 화면이 보여지는 것이죠.

무엇에 의해 코드가 변경되서 보여지는 것일까요?

스킨 파일 중에 하나인 main.js이라는 자바스크립트 파일에서 코드를 변형시킵니다.

(skin.html의 후반부에 main.js 스크립트를 불러옴)

//카테고리다른글 변경
if($('.another_category').length > 0) {
    var $ac = $('.another_category');
    var $acHead = $ac.find('h4');
 
    $acHead.each(function(){
        var $this = $(this);
        var $achLink = $this.find('a');
        var acText = '<span class="txt-bar"></span><span class="lv-txt">카테고리의 다른글</span>';
 
        if($achLink.length > 1) {
            $achLink.eq(0).addClass('alv-one has-sub-alv');
            $achLink.eq(1).addClass('alv-two');
        } else {
            $achLink.addClass('alv-one');
        };
 
        $this.empty().append($achLink).append(acText);
    });
 
    $ac.find('.current').removeClass('current').closest('tr').addClass('current');
    $('.point-another').before($ac);
    
};

위 코드가 실행되면 DOM을 이용해 html에서 원하는 attribute에 접근하여 속성을 변화시킵니다.

이런 방식으로 서버에서 전달받은 소스는 변형?렌더링? 되어서 사용자에게 보여지게 됩니다.

참고하세용~