Разница между двумя стилями элементов в Google Chrome

Я использую инструменты разработчика Google Chrome, и я постоянно проверяю один элемент против другого взад и вперед, чтобы узнать, что может вызвать определенную проблему стиля.

Было бы неплохо сравнить различия в стилях между элементом 1 и элементом 2.

Можно ли это сделать с помощью хрома в настоящее время или с помощью некоторого обходного пути? Есть ли инструмент, который может делать то, что я ищу?

Текущий пример разницы в стилях состоит в том, что у меня есть встроенный H4 рядом с A, где A появляется выше при вертикальном выравнивании. Я не ищу решения в этом вопросе, так как буду разбираться.

Ответы

Ответ 1

Обновление: В результате этого обсуждения был создан Diff CSS" Расширение 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);

Как его использовать?

Осмотрите два элемента, которые вы хотите сравнить один за другим, и вставьте код выше в консоль.

Результат