브라우저에서 JSON을 볼 때 레이아웃 성형하여 테마에 맞게 보기 쉽게 JSONView가 개발 체험을 상상 이상으로 향상시킨 건

DL;TL

단지 단순히 chrome 확장의 JSONView을 넣으면 브라우저에서 JSON이 보기 쉬워진다는 이야기로,
기사적인 가치는 내가 사용하고있는 배경 CSS 스타일을 붙이기 때문에 copipe하고 사용해보십시오! 라는 곳입니다.
소요시간 1분.

전치

API 개발을 하고 있을 때 터미널에서 curl 하는 것도 좋지만, grep 등 다른 쉘 커멘드와 조합하는 등의 목적이 없는 경우는 개발 체험이 결코 좋은 것이 아닙니다.

브라우저에서 표시하면 자동으로 요청 헤더도 붙여주고 다른 크롬 확장과의 조합도 할 수 있기 때문에 비약적으로 취급하기 쉬워집니다.

JSON의 응답을 성형하고 보기 쉽게 하고 싶었기 때문에 chrome 확장을 찾았는데, 스스로 스타일시트를 만지작 JSONView 를 채용하기로 했습니다.

절차

여기에서 크롬 확장을 넣습니다.
JSONView

사이트 데이터를 읽고 변경합니다 ▶ 의 확장 기능을 클릭했을 때를 선택하여 더 이상 사용할 수 있습니다.

스타일을 만지고 싶을 때

넣으면 확장 프로그램 관리를 클릭하십시오.


Build custom theme with style editor의 open을 클릭하여 스타일


이 화면에서 스타일을 다시 쓰고 Save하면 OK입니다.


디폴트에서는 흰색 배경에 스타일이 맞고 있습니다만, 나는 눈부신 화면이라고 괴롭기 때문에 오리지날의 Dark Theme를 작성했습니다.
붙여 놓기 때문에 그대로 copipe하고 사용해도 괜찮습니다.

body {
  white-space: pre;
  font-family: monospace;
  background-color: #000;
  color: #eac;
}

.property {
  font-weight: bold;
}

.type-null {
  color: #f77;
}

.type-boolean {
  color: #4df;
}

.type-number {
  color: #cc2;
}

.type-string {
  color: #5c5;
}

.callback-function {
  color: gray;
}

.collapser:after {
  content: "-";
}

.collapsed > .collapser:after {
  content: "+";
}

.ellipsis:after {
  content: " … ";
}

.collapsible {
  margin-left: 2em;
}

.hoverable {
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 2px;
  padding-right: 2px;
  border-radius: 2px;
}

.hovered {
  background-color: #345;  
}

.collapser {
  padding-right: 6px;
  padding-left: 6px;
}
a {
  color: #77aaee
}

다음 스타일링의 가독성과 의미에 따른 조건 포인트
integer는 수치는 1,2등의 작은 수치에서도 눈에 띄도록 밝은 옐로우
boolean은 밝은 파란색
링크가 링크라고 알면 URL은 중요하지 않으므로 푸른 파란색으로 밑줄
null은 조금 밝은 생생한 핑크

거기 보기 쉽다고 생각합니다.

마음에 드시면 좋을 수 있으면 격려가됩니다.