Tôi làm cách nào để đo lường pixel trong Chrome mà không có tiện ích mở rộng?

Question

Do giới hạn bảo mật tại nơi làm việc, tôi không được phép cài đặt tiện ích của Chrome. Chrome có một người cai trị được xây dựng trong các công cụ dành cho nhà phát triển, nhưng tôi không thể tìm ra cách xác định các điểm bắt đầu và điểm kết thúc như một người cai trị sẽ cho phép.

Có bất kỳ công cụ hoặc kỹ thuật nào để đo pixel không yêu cầu cài đặt tiện ích của Chrome không?

Answer 1

Bạn có thể tạo chức năng người cai trị của riêng mình và dán vào bảng điều khiển. Dưới đây là ví dụ cơ bản:

var fromX, fromY; 
var svg = document.createElementNS ('http://www.w3.org/2000/svg',"svg"); 
svg.setAttribute("style", "position: absolute; top:0;left:0;height: " + document.body.clientHeight + "px;width: 100%"); 
var line = document.createElementNS('http://www.w3.org/2000/svg','line'); 
line.setAttribute("style", "stroke-width: 4; stroke: red"); 

svg.appendChild(line); 
document.body.appendChild(svg); 

document.body.addEventListener("mousedown", function (e) { 
    fromX = e.pageX; 
    fromY = e.pageY; 
}); 

document.body.addEventListener("mousemove", function (e) { 
    if (fromX === undefined) { 
    return; 
    } 

    line.setAttribute("x1", fromX); 
    line.setAttribute("x2", e.pageX); 
    line.setAttribute("y1", fromY); 
    line.setAttribute("y2", e.pageY); 

    console.log(
    [fromX, fromY], " to ", [e.pageX, e.pageY], "Distance:", 
    Math.sqrt(Math.pow(fromX - e.pageX, 2) + Math.pow(fromY - e.pageY, 2)) 
); 
}); 

document.body.addEventListener("mouseup", function (e) { 
    fromX = undefined; 
    fromY = undefined; 
}); 

Bạn cũng có thể lưu dưới dạng snippet.

Mã tiện ích mở rộng của Chrome cũng chỉ là JavaScript, vì vậy bạn có thể find the code used by the extension và lưu dưới dạng đoạn mã. Nhược điểm ở đây là mã có thể được nén và dựa vào các tính năng không có sẵn trong trình duyệt.

Answer 2

Tôi nghĩ rằng tốt nhất bạn có thể làm mà không có bất kỳ tiện ích mở rộng nào là hỗn hợp của người cai trị với Thanh tra, bảng chỉ số Tính toán và API dòng lệnh để xem bù trừ (theo đề xuất của @ amza).

Trong ảnh chụp màn hình sau, tôi đã kiểm tra mainbar yếu tố của trang này. Bạn có thể thấy độ lệch pixel từ trên cùng bên trái, nhưng các giá trị không được hiển thị không may. Bạn có thể truy cập vào năm yếu tố được kiểm tra gần đây nhất trong Bảng điều khiển bằng các biến số $0-$4. Trong trường hợp này, tôi sử dụng $0, hiện đang được chọn. offsetLeft và offsetTop sẽ cung cấp cho bạn các giá trị tương ứng khớp với những gì bạn thấy trên thước kẻ. Bảng số liệu Máy tính hiển thị các thứ nguyên, bao gồm giá trị đệm, đường viền và lề. Trong trường hợp này, không có giá trị bên ngoài, nhưng bạn sẽ thêm các giá trị đó vào thứ nguyên 728x1032 mà bạn thấy nếu có.

Thứ gì đó như Page Ruler sẽ dễ dàng hơn nhiều, nhưng với giới hạn của bạn, điều đó là không thể.

Answer 3

Nếu bạn không tìm kiếm các phép đo chính xác, nhưng ước tính ballpark, công cụ tôi sử dụng để đo pixel trên Chrome mà không sử dụng tiện ích của Chrome là công cụ ảnh chụp màn hình macOS.

Nhấn Command + shift + 4, nhấp và kéo để đo pixel, và nhấn ESC hoặc nhấp chuột phải (nếu trái là nút chuột chính của bạn) để ngăn chặn ảnh chụp màn hình khỏi mắc bẫy.

Here's more info

Theo liên kết, bạn có thể phóng to rõ ràng khi ở chế độ chụp màn hình trước khi đo, nhưng tôi đã không thử nó trước.