Оновлення: В результаті цього обговорення було створено розширення " 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)
Як ним користуватися?
Перевірте два елементи, які потрібно порівняти, один за одним, і вставте наведений вище код у консоль.
Результат