chrome://inspect - 크롬 개발자 도구로 모바일 웹 디버깅 하기 (with Flutter)

개요 : chrome://inspect 란? 크롬 브라우저에서 제공되는 디버깅 도구이다. 이 도구를 사용하면 크롬에서 실행 중인 웹 페이지나 웹 애플리케이션을 디버깅할 수 있다. 웹 개발자에게는 익숙한 단축키 'F12' 또한 같은 크롬 개발자 도구이다. 웹앱으로 구성된 하이브리드앱에서의 웹 페이지 또한 개발자 도구를 이용하여 디버깅할 수 있다. 이번 포스팅에서는 모바일 앱에서 웹뷰를 통해 보이는 웹 페이지(하이브리드 앱)를 디버깅하는 방법을 다룬다. 모바일 환경은 안드로이드 가상 에뮬레이터로 진행합니다. 테스트를 위한 간단한 앱을 개발하기 위해서 Flutter를 사용합니다. 포스팅에서 다루는 플러터 프로젝트는 아래의 깃허브 링크에서 다운로드 가능합니다. https://github.com/luvris2/f..

• format_list_bulleted DevOps/Debugging
• · 2023. 12. 13.
• textsms

Visual Studio Software Bit Error) 32비트, 64비트의 ActiveX/dll 파일 호출 오류 해결 방법

Error 한글 컨트롤 (HwpCtrl.ocx) 파일을 COM 구성 요소에 수동으로 추가하려니 에러 발생 ~~~을(를) 자동으로 등록하지 못했습니다. 원인 파악 원래대로라면 COM 구성 요소에 자동적으로 추가되어 있어야 할 것이 없다. 자세히 살펴봐보자. COM 구성 요소에 있는 것들은 경로가 system32 폴더에 밀집되어 있는 것을 확인할 수 있다. 이는 즉, 64비트의 COM 구성 요소임을 의미한다는 것이다. 내가 수동으로 추가하려는 ocx 파일은 32비트이기에 호출할 수 없는 이슈가 발생했었던 것. 그렇다면 32비트 COM 구성 요소를 사용하려면 어떻게 해야 할까? 실질적인 해결 방법은 아니지만, 우회적으로 해결 방법을 알아 냈다. 내가 사용하는 IDE 툴 버전은 Visual Studio 2022..

• format_list_bulleted DevOps/Debugging
• · 2023. 6. 1.
• textsms

VS Code File Read Error - the editor could not be opened due to an unexpected error : unable to read file. unc host access is not allowed please update the 'security.allowedunchosts' setting if you want to allow this host

Error 어느순간부터 다른 컴퓨터의 소스 코드 파일을 열지 못한다. 수정하자니 매번 내 컴퓨터로 옮겨와서 소스 코드를 수정하고 다시 옮기는 것이 여간 귀찮다. 해결 방법 메뉴 - File - Preferences - Settings Security: Allowed UNCHosts 검색 - Add Item 에러가 났던 경로 입력 특정 아이피의 원격으로 접속하여 VS Code로 실행했던 것이라 나는 아이피만 입력해주었다. Restart 파일 접근 확인 정상적으로 잘 불러와진다! 참고 Visual Studio Code - Working with UNC Paths

• format_list_bulleted DevOps/Debugging
• · 2023. 5. 12.
• textsms

IE - 인터넷 익스플로러 버전별로 페이지 로딩하여 디버깅하기

개발자 도구 실행 (IEChooser) 윈도우키+R - %systemroot%\system32\f12\IEChooser.exe 디버깅 할 페이지 선택 인터넥 익스플로러 버전 변경 에뮬레이션 탭 - 문서 모드 지원되는 IE 버전 - 5, 7, 8, 10, 11 문서 모드 변경 전 기본값 9 (인터넷 익스플로러 9) 문서 모드 변경 후 11 (인터넷 익스플로러 11) 참고 Microsoft - IE 모두 문제 해결 및 FAQ https://learn.microsoft.com/ko-kr/deployedge/edge-ie-mode-faq IE(Internet Explorer) 모드 문제 해결 및 FAQ Microsoft Edge Internet Explorer 모드에 대한 문제 해결 가이드 및 FAQ learn..

• format_list_bulleted DevOps/Debugging
• · 2023. 1. 17.
• textsms

IE - 인터넷 익스플로러에서 개발자 도구 열기

엣지에서 인터넷 익스플로러로 페이지 열기 엣지 오른쪽 상단의 ... 모양 클릭 - Internet Explorer 모드에서 다시 로드 IE 모드로 페이지가 로드 원하는 설정을 클릭 후에 완료 IE 개발자 도구 열기 인터넷 익스플로러에서는 엣지의 개발자 도구를 열 수 없음 그렇기 때문에 IEChooser를 사용해야 함 실행창 열기 윈도우키 + R IEChooser 실행 %systemroot%\system32\f12\IEChooser.exe IEChooser 실행 화면 원하는 페이지를 선택하여 디버깅 진행 참고 Microsoft - 인터넷 익스플로러 모드에서 DevTools 사용 https://learn.microsoft.com/ko-kr/microsoft-edge/devtools-guide-chromium..

• format_list_bulleted DevOps/Debugging
• · 2023. 1. 17.
• textsms

Chrome - DevTools (크롬 개발자 도구 사용하기)

크롬 개발자 도구란? (Chrome DevTools) 크롬 브라우저에 직접 내장된 웹 개발자 도구 페이지를 즉석에서 편집하고 문제를 신속하게 진단 웹 사이트 구축 소요시간 단축에 용이 웹 사이트 개발과 디버깅에 매우 유용하다!!! 개발자 도구 열기 방법1. 마우스 이용 페이지 내에서 우클릭 - 검사 방법2. 단축키 이용 (2가지) 첫번째 단축키 : Ctrl + Shift + C 두번째 단축키 : F12 개발자 도구 실행 화면 요소 활용하기 (Elements) 페이지 내의 특정 요소 지정하기 개발자 도구 좌측 상단의 첫번째 버튼을 누르면 특정 요소를 지정 할 수 있음 (buttom name : Select an element in the page to inspect it) 지정된 요소는 정의된 값을 확인 ..

• format_list_bulleted DevOps/Debugging
• · 2022. 12. 27.
• textsms