Comment mesurer des pixels dans Chrome sans extension?
En raison de contraintes de sécurité au travail, je ne suis pas autorisé à installer des extensions Chrome. Chrome contient une règle intégrée aux outils de développement, mais je ne vois pas comment définir les points de début et de fin comme le permet une règle.
Existe-t-il des outils ou techniques de mesure des pixels qui ne nécessitent pas l'installation d'une extension Chrome?
Vous pouvez créer votre propre fonctionnalité de règle et la coller dans la console. Voici un exemple de base:
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;
});
Vous pouvez également l'enregistrer en tant que extrait .
Le code d'extension Chrome est également juste du code JavaScript. Vous pouvez trouver le code utilisé par l'extension et l'enregistrer sous forme d'extrait. L'inconvénient est que le code peut être compressé et s'appuyer sur des fonctionnalités qui ne sont normalement pas disponibles dans le navigateur.
Si vous ne recherchez pas des mesures exactes, mais une estimation approximative, un outil que j'utilise pour mesurer les pixels sur Chrome sans utiliser d'extension Chrome est l'outil de capture d'écran macOS.
Appuyez sur Commande + Maj + 4, cliquez et faites glisser pour mesurer les pixels, puis appuyez sur ESC ou cliquez à l'aide du bouton droit de la souris (s'il s'agit du bouton principal de la souris gauche) pour empêcher la capture d'écran.
Selon le lien, vous pouvez apparemment effectuer un zoom avant en mode capture d'écran avant de prendre une mesure, mais je ne l'ai pas encore essayée.
Je pense que le mieux que vous puissiez faire sans extension consiste à utiliser la règle avec Inspector, le panneau Métriques calculées et l'API de ligne de commande pour afficher les décalages (selon la suggestion de @ amza).
Dans la capture d'écran suivante, j'ai inspecté l'élément mainbar de cette page. Vous pouvez voir le décalage de pixel en haut à gauche, mais les valeurs ne sont malheureusement pas affichées. Vous pouvez accéder aux cinq derniers éléments inspectés dans la console à l'aide des variables $0-$4. Dans ce cas, j'utilise $0, qui est celui actuellement sélectionné. offsetLeft et offsetTop vous donneront les valeurs correspondantes qui correspondent à ce que vous voyez sur la règle. Le panneau Métriques de calcul affiche les dimensions, y compris les valeurs de remplissage, de bordure et de marge. Dans ce cas, il n'y a pas de valeurs externes, mais vous les ajouteriez à la dimension 728x1032 que vous voyez s'il y en avait.
Quelque chose comme Page Ruler serait beaucoup plus facile, mais étant donné vos limites, ce n'est pas possible.
Une autre façon de mesurer un pixel en chrome sans extension est la suivante:
- Ouvrez l'outil Developer en appuyant sur F12 dans la fenêtre ou cliquez avec le bouton droit de la souris + inspectez l'élément.
- Inspecter l'élément dans le navigateur pour mesurer
- Ouvrez l'onglet Calculé et passez la souris sur les blocs pour voir la zone en surbrillance dans l'exploration.
