Gibt es eine Möglichkeit, den Chrome DevTools-Farbwähler größer zu machen?

Question

In Chrome DevTools (f12) kann man auf ein Farbfeld neben dem Hexadezimalwert einer CSS-Regel klicken. Dies bringt einen Farbwähler mit einer süßen Pixel-Zoom-Picker-Fähigkeit hervor. Das ist alles gut, aber wenn nicht mit dem Pixel-Picker ist es schwierig, eine bestimmte Farbe zu nageln. Dies liegt daran, dass die Farbauswahl klein ist und die Schieberegler/Auswahl daher zu empfindlich sind. Es ist sehr schwierig, zum Beispiel einen bestimmten Farbton zu bekommen, und wenn Sie irgendeine Art von Kaffee gehabt haben, der die mousende Hand zittern lässt, ist es unglaublich (fast) unmöglich, an einem genauen "Pixel" auf dem Schieberegler loszulassen.

Ich sehe DevTools has extensions, wo man Panels hinzufügen kann, aber ich sehe nicht, ob es möglich ist, das tatsächliche DevTools DOM zu manipulieren, noch [wenn ja] wie Inspektor zu überprüfen, während der Farbwähler init ist.

Wie würde ich darüber gehen? Gibt es eine Möglichkeit, die Größe des Colorpickers um etwa das Doppelte zu erhöhen? Eine käsige verschwommene CSS-Skala ist in Ordnung, nichts Besonderes. Dies würde ein brauchbares Schieberegler-Targeting ermöglichen. Es tut uns leid, wenn dieses Thema in Stackoverflow off-Thema ist, sein Schwerpunkt auf die Programmierung einer Erweiterung/Lösung, nicht wie DevTools (dh webapps.stackexchange) zu verwenden.

Answer 1

Wie wäre es, wenn Sie nur auf Ihr DevTools-Fenster zoomen? Ctrl und + unter Windows/Linux, Cmd und + auf Mac.

Klein:

Big:

Answer 2

Die Farbauswahl verwendet in Chrome DevTools ist eine Implementierung von Spectrum, die in Web-Inspektor für WebKit hinzugefügt wurde, und anschließend Blink-basierte Browser im Jahr 2013. Derzeit gibt es keine APIs, die den Farbwähler auf Chrome Extensions setzen.

Sie haben ein paar Optionen, die ich denke, aus kann:

1. Log an issue here mit einigen Details und Screenshots und die Dimensionierung der Kommissionierer für Änderungen mit einem starken Fall kommen. Ich denke, es ist eine gute Idee.

2. Laden Sie eine Kopie der DevTools-Webanwendung lokal herunter und verbinden Sie sie mithilfe des Remote Debugging Protocol mit einer Chrome-Instanz. Genaue Anweisungen finden Sie unter Hacking Chrome DevTools.

Die zweite Option ist eine coole Art DevTools lokal zu gestalten, aber es ist keine langfristige Lösung, wie Sie neuesten Code erhalten müßten regelmäßig Kompatibilität mit dem Back-End zu halten.

Update: Die dritte Option, die ich dumm vermisste, ist einfach zoomen, wie Kayce Antwort, die ich gerade sah, als ich diese Antwort postete. Auf einem Mac können Sie auch Cmd + Alt + + verwenden, um das gesamte Fenster zu vergrößern. Wenn Sie die Alt auslassen, wird nur das aktuelle Fenster vergrößert.