TL : DR : 내 질문은 : 유성 앱의 HTML을 디버깅하는 가장 좋은 방법은 무엇입니까?유성 앱의 HTML을 디버깅하는 방법은 무엇입니까?
나는 Themeforest에서 구입 한 기존 HTML 테마를 유성으로 이식하려고하는 멍청한 놈입니다. 테마는 HTML + JS 형식으로 제공됩니다.
첫 번째 단계는 테마의 모든 옵션이 구성된 HTML 페이지를 만드는 것입니다. 그런 다음 디렉토리 구조와 JS 라이브러리 조직을 변경했습니다. 이 단계는 HTML 페이지를 열어서 어떤 HTML 오류가 발생했는지 확인한 다음 CSS/JS를 추가하거나 참조 된 경로를 새 폴더 구성과 일치하도록 변경하기 만하면 매우 쉽습니다.
이제 유성 앱과 함께이 HTML을 사용하려고합니다. 벌써 많은 일들이 벌어지면서 페이지가 나타나기 때문에 나는 이미 훨씬 앞서 있습니다. 정상적인 HTML과 같은 HTML 오류를 검사 할 수 있다면 대부분 쉽게 해결할 수있는 CSS/JS 충돌이 작동하지 않습니다. 어쨌든 이제는 페이지 소스가 대부분 JS 라이브러리에 대한 참조이며, HTML 태그가 없으며 크롬 콘솔에 의미있는 오류가 표시되지 않습니다.
뭔가 아주 기본적인 것을 놓친 것일 수도 있습니다. 디버깅에 도움이되는 크롬 플러그인을 설치해야 할 수도 있고, 유성에 대해 오해하고있는 것일 수도 있습니다. 내가 생각하기에 유성은 동적으로 페이지를 생성하기 때문에 소스에서 대부분 JS와 HTML을 볼 수 없으며 가능한 해결책은 유성에서 페이지의 정적 버전을 얻는 것입니다.
내 질문은 : 유성 앱의 HTML을 디버깅하는 가장 좋은 방법은 무엇입니까?
편집 참고 : 시나리오를 이해하는 데 도움이되도록 다음 내용을 더 자세히 설명합니다. 테마는 부트 스트랩을 사용합니다. 사용자 정의 HTML 페이지를 만들었을 때 부트 스트랩을 업그레이드 했으므로 코드에서 몇 가지 참조를 변경해야했습니다. Chrome이 어떤 속성 및 애셋을로드 할 수 없었는지를 보여주기 때문에 쉽습니다.
이제 Meteor Bootstrap CSS 패키지를 사용 중이며 테마가 다시 부러졌습니다. 아무리해도 Chrome 콘솔에서 오류가 발생하지 않으므로 작동하지 않는 항목을 이해하는 것은 매우 어렵습니다.
? "HTML 디버깅"이 의미하는 것은 소스를 살펴보고로드 할 수없는 리소스를 확인할 수있었습니다. – Mascarpone
안녕하세요, 콘솔 도구를 사용하여 HTML을 검사하고, 다운로드 한 리소스 파일 등을 확인해야합니다. Firefox에서는 FireBug를 사용할 수 있고 Chrome에서는 내장 콘솔을 사용할 수 있습니다. 일반적으로 브라우저 창에서 마우스 오른쪽 버튼을 클릭하고 요소 검사를 선택하여 해당 브라우저에 대한 개발자 도구를 얻을 수 있습니다. – Scriptable
일반 HTML로 수행 한 작업이지만 유성 HTML를 사용하고 있으므로 동적으로로드되고 자바 스크립트 만 확인합니다. 소스 코드. – Mascarpone