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


78

Я використовую інструменти для розробників Google Chrome і постійно перевіряю один елемент на інший, щоб з’ясувати, що може спричинити певну проблему стилю.

Було б непогано порівняти відмінності в стилі між елементом 1 та елементом 2.

Чи можна це зробити за допомогою хрому в даний час або шляхом певного обходу? Чи є там інструмент, який може робити те, що я шукаю?

Поточний приклад різниці стилів полягає в тому, що у мене є вбудований рядок H4поруч із, Aде a Aвідображається вище у вертикальному вирівнюванні. Я не шукаю рішення у цьому питанні, оскільки розберуся.

Відповіді:


147

Оновлення: В результаті цього обговорення було створено розширення " 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);

Як ним користуватися?

Перевірте два елементи, які потрібно порівняти, один за одним, і вставте наведений вище код у консоль.

Результат

зразок вихідних даних із наданого фрагмента


Фантастичний. Виклав простежування питання stackoverflow.com/questions/12611440 / ...
Valamas

Оскільки я в підсумку створив розширення chrome для цього, моя оригінальна відповідь була оновлена.
Конрад Дзвінель,

1
@GeoffreyHudik Розширення CSS Diff тепер працює між вкладками - перевірте його.
Конрад Дзвінель

1
Якщо ви не проти використовувати Firefox, я додав функцію, яка дозволяє клацнути правою кнопкою миші, встановити вузол "A", клацнути правою кнопкою миші, встановити вузол "B" та порівняти атрибути, css для елемента та його дочірніх елементів : addons.mozilla. org / en-US / firefox / addon / devtools-tweaks
NoBugs

7
посилання в даний час мертва
вали
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.