본문 바로가기
Ghost의 Ghost노트/Ghost의 웨일에서 개발자 도구 사용하기

Ghost의 웨일에서 개발자 도구 사용하기

by dark ghost 2023. 8. 28.
728x90
반응형

오늘은 혹시 웨일에서 코드

분석할 수 있도록 도와주는 개발자 도구 사용

방법에 대해서 포스팅을 해볼려고 하네요...

물론 많은 개발 하시는 분들은 잘 아실 것 같구요..

아마 '새로 공부하시는 분들이 관심을 

가지지 않을까? '라는 생각이 드네요...

그럼 웨일설치 되어 있다면

웨일기본 바탕크롬으로 되어있는지

크롬과 많이 비슷하네요...

하지만 개발자 도구위치크롬과는 

좀 다른것 같더라구요...

그림 1) 옵션 버튼 -> 기타

 다른 부분은 점 세개옵션 부분인건 비슷하지만

크롬에서 도구 더보기 -> 개발자 도구를 확인

할 수 있지만 웨일은 그 부분이 다르네요...

점 세개를 선택하게 되면 기타 메뉴가 있네요...

그림 2) 고급기능 -> 개발자 도구

기타 메뉴로 가면 다른 메뉴에서 고급기능을 확인 할 수가 

있는데 개발자 도구가 기 고급기능 메뉴에 포함

되어 있네요... 처음으로 웨일에서 

개발자 도구를 찾아 보시려고 한 분들은 어쩌면 찾기가

어려울 수 도 있을 것 같아요... 저도 처음에

못 찾았거든요...

그림 3) 개발자 도구

제대로 들어가졌다면 오른 쪽에 크롬에서

볼 수 있었던 익숙한 이 뜬다면

제대로 된거네요...

저도 크롬을 사용하다가

웨일을 사용해보니 웨일도 나쁜지 않아서

사용 중이라 웬만한건 웨일로 하다보니

크롬과 사용환경이 조금은 다르더라구요...

그리고 다 아실수도 있으시겠지만

그래도 혹시 처음으로 사용하시는 분들에게

조금이라도 도움이 됐으면 하는 

생각에 좋은 기능을 하나 알려 드리고 싶네요...

그림 4) 웹페이지 정보 얻기

코드 창이 보이는데 거기서 점선 네모 안에

화살표가 있는 부분을 선택하게 되면

웹 페이지에서 이미지들이나 각종 텍스트들을

선택할 수 있게 되는데 선택하고 나면

오른 쪽 코드 창에서 그 이미지나 

텍스트들에 대한 코드 정보를 확인 할 수 있네요...

아무튼 끝까지 봐주신다고 

수고 많으셨네요...

 

 

그리고 도움이 되셨다면 공감에 체크해주시면

감사하겠습니다...

                                                                         

                                                                                                          By. Ghost

 

728x90
반응형

댓글