Google 크롬에서 두 요소 스타일의 차이점

Google 크롬에서 두 요소 스타일의 차이점

---

저는 Google 크롬 개발자 도구를 사용하고 특정 특정 스타일 문제의 원인이 무엇인지 찾기 위해 한 요소를 다른 요소에 대해 검사로 검사하고 있습니다.

요소 1과 요소 2의 스타일 차이를 비교하면 좋을 것입니다.

현재 크롬을 사용하거나 일부 해결 방법을 통해이 작업을 수행 할 수 있습니까? 내가 찾고있는 것을 할 수있는 도구가 있습니까?

스타일 차이의 현재 예는 세로 정렬에서 더 많은 위치 H4옆에 인라인이 많은 것 입니다. 이 질문에 대한 해결책을 찾고 있습니다.AA

---

---

업데이트 : 이 토론의 결과로 " CSS Diff "Chrome 확장 프로그램이 생성되었습니다.

---

확장에 대한 좋은 질문과 멋진 아이디어!

개념의 증거

개념 증명에서 작은 트릭을 수행하고 확장 기능을 만들지 않을 수 있습니다. Chrome은 '요소 검사'버튼을 선택한 요소를 유지합니다. 에서 마지막으로 선택한 요소 $0, 그 이전의 요소 $1등을 기반으로 마지막으로 검사 한 두 요소를 비교하는 작은 스 니펫을 만들었습니다.

(function(a,b){    
    var aComputed = getComputedStyle(a);
    var bComputed = getComputedStyle(b);

    console.log('------------------------------------------');
    console.log('You are comparing: ');
    console.log('A:', a);
    console.log('B:', b);
    console.log('------------------------------------------');

    for(var aname in aComputed) {
        var avalue = aComputed[aname];
        var bvalue = bComputed[aname];

        if( aname === 'length' || aname === 'cssText' || typeof avalue === "function" ) {
            continue;
        }

        if( avalue !== bvalue ) {
            console.warn('Attribute ' + aname + ' differs: ');
            console.log('A:', avalue);
            console.log('B:', bvalue);
        }
    }

    console.log('------------------------------------------');
})($0,$1);

어떻게 사용 하는가?

비교하려는 두 요소를 차례로 검사하고 위의 코드를 콘솔에 비교하고십시오.

결과

참고 URL : https://stackoverflow.com/questions/12592473/difference-between-two-element-styles-with-google-chrome