# DevTools

gimgoya

오늘 axios 통신으로 회원가입 기능을 만드는 과정에서, 개발자 도구의 사용이 얼마나 중요한 부분인지에 대해 느끼고 배울 수 있었다. 하여, 개발자 도구에 대해 공부하는 시리즈를 포스팅하려 한다. 1. Console 콘솔에서 어떤 데이터들이 찍히는 지를 보는 게 정말 중요하다. 이 데이터의 key를 통해 정말 많은 에너지를 줄이며 개발을 할 수 있다. 명심해야 한다. 2. Network 서버를 통해 데이터를 주고 받는 개발을 할 때, 체크해야 한다. response의 status가 어떤 지 알고 배워야 하고, 여기에서

b-joon

Spring boot DevTools 란? > 소스 변경이 발생할 때마다 자동으로 빌드를 해줘서 빠르게 적용한 코드 결과를 확인할 수 있게 도와주는 툴입니다. 의존성 추가 grale maven Intellij 설정 mac Intellij 경우 (윈도우는 상단 File -> settings를 클릭하시면 됩니다. 단축키 Ctrl + Alt + s) Build, Execution, Deployment -> Compiler -> Build project automatically 체크 <img width="571" alt="image" src="https://github.com/B-joo

eeuglena

목표 개발자 도구의 다양한 활용법을 배워보자. 중단점 특정 노드에서 중단점을 설정할 수 있다. 보기와 같이 속성 수정에 중단점을 설정하게 되면 해당 노드의 속성이 바뀔 때 디버거에서 중단점이 표시된다. 콘솔 명령어 디버깅을 위해 자주 사용하는 console.log() 외에도 다양한 메소드가 존재한다. console의 내장 메소드를 기능에 따라 정리해보았다. 콘솔에 메시지 표시 ![](https://velog.velcdn.com/images/eeuglena/post/78138408-cc11-

kimmin0411

살짝은 허무하기도 한 문제이다 문제에 답이 있다는 말이 정말 딱 맞는 문제인듯(?) > F12 : 개발자도구 열기 Ctrl + Shift + F : 모든 파일에서 키워드 검색 개발자도구에서 DH를 검색하니 답이 나왔다 나름 혼자 힘으로 푼 첫 문제!! 앞으로도 잘 풀어보자구!

wool_ly

1) build.gradle 파일 열기 2) dependencies 부분에 추가 > implementation 'org.springframework.boot:spring-boot-devtools' 3) Gradle 변경 로드 (단축키 : Crtl+Shift+O) 4) HTML 파일 변경 시 해당 파일 연 상태에서 상단탭의 '빌드-다시 컴파일' 클릭 (단축키 : Crtl+Shift+F9) [기존] ![](https://velog.velcdn.com/images/wool_ly/post/ab44a3b0-acec-4e72-aa6b-0879

jiyoung7477

const useMenuStore = create( devtools((set) => ({ status: false, setStatus: () => set((state) => ({ status: !state.status })), })), )

shdrnrhd113

🔗 dependencies 설정 - Assert J , Query DSL 🔗 aplication.yml - H2 , JPA , Logging 설정 🔗 aplication.yml - My SQL , JAP , Thymeleaf 설정 ✏️ Gradle 변경 Intellij 로 변경 java 버전 변경 grad

bak_chun8

님들은 RN에서 디버깅 어떻게 하시나요? 저는 미련하게도 그냥 메트로(기본 터미널)에서 console.log찍어서 했답니다. 근데 그렇게 하면 특히 패칭된 데이터 볼때는 눈깔 빠질랑 말랑해요. 크롬과 연결해서 사용하는게 기존 웹개발 하시던 분들은 더 편하실거예요. 저같은 경우에는 RN에서의 성능체크라던가 네트워크도 확인하고싶어서 Flipper를 사용했었는데 서비스에 채널톡을 붙이게 되면서 Flipper를 사용하지 못하게 되었답니다.(iOS는 Flipper와 ChannelIO가 충돌나기 떄문에 Flipper를 pod에서 비활성화 시켜줘야함) 그래서 이거저거 찾아보다가 Devtools와 연결해서 사용할 수 있다는걸 접하고 사용을 하고 있었습니다. 그러다가 문제가 터진게 저같은 경우에는 PC가 그렇게 좋지 않아서 Android와 iOS시뮬레이터를 동시에 켜서 작업하는게 불가능합니다. 그래서 주로 iOS로 작업하고 Android에서 디버깅을 하죠. iOS에서 개발하면서 콘솔로그

moon-tree

♣ Spring Boot 스프링 부트 실행 프로젝트 우클릭 -> Run As -> Spring Boot App 클릭 devtools 저장할 때 마다 자동으로 restart 된다. 패키지(Package) 생성 방법 Name : 기존명.추가할 이름 반드시"".""으로 구분해줘야 한다. 기존명의 추가 할 이름을 작성하면 다른 패키지 이름이 되므로 Error가 발생한다. 홈페이지 출력 결과 확인 프로토콜://IP:Post/세부경로 ex) http://localhost:8888/welcome 서버주소/컨트롤러 주소?매핑주소 앞에 슬러시(/)에 유무에 따라 달라짐 /subject : 절대 경로 suject : 상대경로 프로토콜 : 통신방식(http/https) IP : 컴퓨터 주소 (localhost) Port : 프로그램 번호(8888) 세부경로 : 나머지 주소(/

dram26

React Developer Tools 설치 터미널에서 global 로 react-devtools 를 설치해준다. yarn global add react-devtools 혹은 npm install -g react-devtools 프로젝트 터미널에서 react-devtools 를 실행한다. react-devtools simulator 에서 command + D 를 눌러서 데브툴을 열어준다. ![](https://velog.velcdn.com/images/dram26/post/093dda19-3e

dayoung_sarah

Devtools Spring boot에서 제공하는 개발 편의를 위한 모듈 기능 Property Defaults ⇒ spring boot에서 제공하는 라이브러리 캐시 기능을 사용하여 성능 향상. 대표적으로 thymeleaf와 같은 템플릿 엔진을 사용하면 반복적으로 구문 분석하지 않도록 템플릿을 컴파일하여 캐싱한다. 그러나 개발 하는 경우 변경을 바로 확인하여야 하기에 별도의 설정을 해야 한다. Automatic Restart ⇒ 파일 수정 후 저장을 하면 Classpath에 존재하는 파일의 변경을 감지하고, 자동으로 서버를 restart 해준다. 설정을 통해 원하는 디렉토리만 트리거로 설정할 수도 있다. Live Reload ⇒ JS파일을 수정하기만 해도 자동으로 브라우저가 새로 고침된다. 내부적으로 live reload 서버를 두고 브라우저 확장프로그램과 통신하는 방식으로 동작한다. Global Settings

723poil

Devtools는 스프링 부트에서 제공하는 편의 기능으로 개발할 때, 코드를 수정하게 되면 웹에서도 보여지는 것이 바뀌려면 앱을 재실행 해야된다. 이런 불편한 요소를 해결해주는것이 Devtools이다. 🎈설정하기 Gradle에 추가하기 🎈Advanced Settings 설정 > Allow auto-make to start even if developed application is currently running 체크 🎈Build project automatically 체크 참고 [Spring

tmax_ux_dev

DevTools 어디까지 활용할 수 있을까? references developer.chrome - UX Report, Chrome DevTools 확인. 남들 모르는 크롬 개발자도구 소소한 기능 8개 - 유쾌하고 명료. [NHN FORWARD 2020] 천천히 읽어 보는 Chrome 개발자 도구 설명서 - 서론이 조금 긴편이지만 좋은 취지를 알 수 있음. E02-3-React. 디버깅 방법, 정보를 얻는 방법 - React 디버깅 방법 가르쳐 줌. (설명해주시는 분이 velog.io 개발자님...ㅇㅁㅇ) shortc

iky1505

스프링 공부할 때 참고할 가이드 > Guides > 타임리프 > 기본 마크업을 깨지 않고 그대로 사용 가능 스프링 부트 thymeleaf viewName 매핑 → resources:templates/ +{ViewName}+ .html devtools build.gradle 에 implementation 'org.springframework.boot:spring-boot-devtools' 라이브러리를 추가해주면 서버를 재시작 하지 않고, build에서 recompile ~ 을 통해 html 파일 변경사항을 적용 할 수 있다. mac 터미널에서 h2 연동시 zsh:persmission denied 뜨는 경우 ./h2.

amoeba25

과제 안내 Elements 패널의 기능은? 해당 페이지는 몇 개의 section 으로 이루어져있나요? Instagram 피드의 가로 길이는? Styles 부분의 순서가 의미하는 것은? user agent stylesheet 란? 그전에,, 개발자 도구란? - Google Chrome 브라우저에 직접 내장된 웹 개발자 도구 모음. 개발자 도구를 사용하면? 페이지를 별다른 로드 없이 수정할 수 있기 때문에 브라우저에게 빠른 피드백을 받을 수 있다. 개발자 도구 왼쪽 상단 모서리에 있는 Inspect 아이콘을 사용해 브라우저가

pmb087

console은 프론트엔드 개발을 하면서 자주 사용하는 DevTools의 한 패널이다. 이번에 다룰 주제는 console패널의 유용한 기능, 정보이다. console console패널을 사용하는 가장 큰 이유를 꼽으라면 내가 작업중인 파일을 직접 수정하지 않고 패널에 입력하는 것으로 실시간으로 확인해볼수 있다는 점이다. 웹개발을 하다보면 눈에 보이는 div , img , input 과 같은 부분 외적으로 JS에서 선언한 변수의 변화, 어떤 기능을 설계하고 실행했을 때 목표로 하는 target이 변화됐는지. 이런 것들을 확인하기 위해서 console.log()명령어를 매우 자주 사용하게 된다. Preserve log 내가 이전에 기록한 console.log()의 내용을 페이지를 새로고침해도 계속해서 보존하고싶을 때가 있다. 그럴 때는 ![](https://velog.velcdn.com/images/pmb08

reasonz

리액트에서 객체를 함부로 바꾸지 마라. (불변성) 자바스크립트 문법중에 array와 관련된 내장 함수를 먼저 살펴보자. > 1. pop, push, shift, unshift, splice 2. concat, slice 1번 그룹과 2번 그룹에 적힌 배열 내장함수의 차이점이 무엇일까? 바로 1번 그룹은 원본 배열을 직접적으로 수정할 것이고 2번 그룹은 원본 배열을 수정하지 않고 새로운 배열을 만들어 반환할 것이다. 가급적 원본 배열을 직접적으로 수정하는 것을 사용하는 것은 좋지 않다. 이것의 연장선상으로 리액트에서도 마찬가지로 객체(배열, 오브젝트, 함수 등)를 함부로 바꾸지 말아야 한다. > 객체를 함부로 바꾸지 말고 바꿔야 할 객체가 있다면 복사해서 사용해야 한다. 리액트의 setState 그렇기 때문에 class형 컴포넌트 문법 기준으로 this.state.변수명 = 변경할 내용; 대신 `this.setState({변경할

hi_young

프로젝트 업데이트 후 아래와 같은 문제가 생겼다. DevTools에서 소스 맵을 로드하지 못함: url/assets/swiper/swiper.min.js.map의 콘텐츠를 파싱할 수 없음: Unexpected token < in JSON at position 0 swiper.min.js.map 파일을 찾을 수 없어서 생기는 경고인데 swiper 깃허브에서 해당파일을 다운받아 넣어주거나 //# sourceMappingURL=swiper.min.js.map 소스맵핑url을 제거해주면 된다. 이미 배포가 끝난 뒤고, swiper 라이브러리의 소스맵 파일이니 map파일을 추가하기보다는 그냥 지우는게 더 좋을거같다는 생각이 든다. 그런데 궁금해서 네이버를 들어가보니 여기도 소스맵 때문에 이와 같은 경고들이 뜨고 있었다. 프로그램이 동작하는데 문제는 없지만 그래도 보기가 좀 그렇군.. ![](https://velog.velcdn.com/images/hi_young/post/f9

ubermensch0608

Debugging React Apps 개발을 하다보면 우리는 항상 에러를 마주한다. 조건이 항상 다르기때문에 우리가 경험하는 에러는 아주 다양하다. 이러한 이유로 아마 우리는 에러 없는 코드를 절대 짤 수 없을 것이다. "어짜피 에러는 발생할 것이다." 라는 사실을 받아들였다면, 다음 방향은 그것을 어떻게 해결할까?가 될 것이다. 에러를 잘 해결하는 것은 좋은 개발자가 되기 위한 스킬이기도 하다. 내가 마주한 에러를 해결하기 위해 바로 도움을 요청하기 보다는 스스로 해결해보려는 자세를 갖추어보자. 에러 메시지 이해하기 다음과 같은 에러가 발생하는 것은 일반적인 일이다. 당황하지 말고 우선 에러 메시지가 어떤 것을 우리에게 경고하는지 읽어보자! ![](

mooh2jj

SpringBoot에 DevTools 셋팅을 해보겠습니다. DevTools의 LiveReload 기능이 제일 많이 쓰입니다. LiveReload 이란? LiveReload 기능은 정적소스(html, css, js)에 변화가 있을 때 application이 자동으로 브라우저 새로 고침을 트리거 할 수 있게 해주는 프로토콜입니다. 설정 이제 설정 방법을 알아보겠습니다. 설정 방법은 간단합니다. 0) build.gradle 1) Setting > Build auto 셋팅 2) Advanced Setting > Allow auto-make to start even.. 셋팅 ![](https://images.velog.io/images/mooh