Chrome DevTools 색상 피커를 더 크게 만들 수있는 방법이 있습니까?

Question

Chrome DevTools (f12)에서 CSS 규칙의 16 진수 값 옆에있는 색상 견본을 클릭 할 수 있습니다. 이렇게하면 단색 픽셀 줌 피커 기능이있는 색상 선택기가 나타납니다. 그게 다 좋긴한데, 이 아니고 픽셀 선택기를 사용하면 특정 색상을 못 박는 것이 어렵습니다. 이는 색상 피커가 작기 때문에 슬라이더/선택기가 너무 민감하기 때문입니다. 예를 들어 특정 색조를 얻는 것은 매우 어렵습니다. 마우스에 손을 흔들어주는 커피가 있다면 슬라이더의 정확한 "픽셀"을 놓고 다니는 것이 유쾌합니다.

DevTools has extensions 패널/창을 추가 할 수 있지만 실제로는 DevTools DOM을 조작 할 수 있는지, 색상 선택기가 init 인 동안 검사기를 검사하는 방법이 있는지는 알 수 없습니다.

어떻게하면됩니까? colorpicker의 크기를 두 배로 늘릴 수있는 방법이 있습니까? 치즈 맛이 희미한 CSS 스케일이 좋으며 아무 것도 필요하지 않습니다. 이렇게하면 유용한 슬라이더 타겟팅을 사용할 수 있습니다. 미안 이것이 stackoverflow에서 주제를 벗어난다면, DevTools (즉, webapps.stackexchange)를 사용하는 방법이 아니라 확장/솔루션을 코딩하는 것에 중점을 둡니다.

Answer 1

DevTools 창을 확대하는 것은 어떻습니까? Windows/Linux의 경우 Ctrl 및 +, Mac의 경우 Cmd 및 +입니다.

작은 :

큰 :

Answer 2

크롬 DevTools로에 사용되는 색상 선택은 웹킷을 위해 웹 인스펙터에 추가 된 Spectrum의 구현이며, 이후 Blink 기반 브라우저가 2013 년에 출시되었습니다. 현재 색상 선택기를 Chrome Extensions에 노출시키는 API는 없습니다.

당신은 내가 떨어져 생각할 수있는 몇 가지 옵션이 있습니다 : 몇 가지 세부 사항 및 스크린 샷

1. Log an issue here을 변경 피커의 크기에 대한 강한 케이스와 함께 제공됩니다. 나는 그것이 좋은 생각이라고 생각한다.

2. 원격 디버깅 프로토콜을 사용하여 DevTools 웹 앱의 복사본을 로컬로 다운로드하여 Chrome 인스턴스에 연결합니다. 자세한 지침은 Hacking Chrome DevTools을 참조하십시오.

두 번째 옵션은 로컬 DevTools로를 사용자 정의 할 수있는 멋진 방법입니다,하지만 당신은 백 엔드와의 호환성을 유지하기 위해 정기적으로 최신 코드를 얻을 것이다으로는 장기적인 해결책이 아니다.

업데이트 : 내가 바보처럼 놓친 세 번째 옵션은 Kayce의 대답에 따라 확대되어 있습니다.이 회신을 게시 한 것처럼 보았습니다. Mac에서는 Cmd + Alt + +을 사용하여 전체 창을 확대/축소 할 수도 있습니다. Alt을 생략하면 현재 창만 확대/축소됩니다.