웹 앱을 만들 때 브라우저에서 F12 키를 누르고 스타일 시트 등을 편집하고 DOM 요소 등을 즉시 제거 할 수 있습니다.WinRT 자바 스크립트 앱 모양을 동적으로 변경
이렇게하면 UI를 개발할 때 빠르게 돌아 서게됩니다. 실시간 보호기!
그렇지 않으면 테스트하려는 영역으로 이동하려면 많은 컴파일, 배포 및 클릭이 필요합니다. 테스트중인 영역이 워크 플로우가 끝나면 고통이 훨씬 더 커집니다. 나는 당신이하고 싶은 모든 것이 글꼴 크기를 "더 나은"모양으로 변경하는 것만으로도 좌절감을 느낄 정도로 시간이 많이 걸리는 것으로 알고 있습니다.
WinRT 환경과 비슷한 도구가 있습니까? 이것은 모바일 앱 개발의 속성일까요? 아니면 플랫폼에 상관없이 UI를 바로 편집 할 수있는 무언가가 있습니까?
예, 몇 가지 옵션을 사용할 수 있습니다.
첫째, Windows 용 Visual Studio Express와 함께 설치되는 Visual Studio 용 블렌드는 멋진 스타일 도구입니다. VS와 동일한 프로젝트 구조를 공유하므로 동시에 두 가지를 모두 실행할 수 있습니다. VS에서는 실제로 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 열기에서 블렌드를 선택하면됩니다.
블렌드는 실제로 앱을로드하고 JS 코드를 실행하므로 동적으로 생성 된 모든 요소도 제대로 배치됩니다. 또한 실행중인 앱으로 이동하고 원하는대로 상태를 탐색 및 설정 한 다음 해당 모드를 종료하고 스타일을 적용 할 수있는 대화식 모드가 있습니다. 더 자세한 내용은 내 책 (first edition | second edition preview)에 블렌드의 기본을 보여주는 비디오가 있습니다. 구체적으로는 here으로 가서 두 번째 에디션의 비디오 2-2 및 5-3을 참조하십시오. 2 장에서는 텍스트에 대해서도 약간 소개합니다.
다른 두 옵션은 Visual Studio 자체에 있습니다.
먼저 실행중인 앱에 Debug> Refresh Windows Apps (F4) 명령이 있습니다.이 명령은 앱을 다시 시작하지 않고 HTML과 CSS를 다시로드합니다. 내가 언급 한 이유와 정확히 일치하는 변경 내용을 다시로드 할 때이 방법을 사용합니다. 이 같은 명령은 일시 중지/중지/다시 시작 버튼 바로 오른쪽에있는 툴바에 있습니다.
둘째, 실행중인 앱에는 디버거에 DOM Explorer 창이 있습니다. 표시되지 않으면 Debug> Windows> DOM Explorer 명령을 사용하여 엽니 다. 이 창에서 Blend의 라이브 DOM 창에서와 같이 DOM 트리를 탐색하고 관심있는 요소를 찾거나 DOM 탐색기의 가장 왼쪽 버튼을 사용하여 선택 영역과 요소를 앱에서 직접 이동할 수 있습니다.
DOM 탐색기의 오른쪽에는 스타일, 추적, 계산, 레이아웃 및 이벤트에 대한 탭이 있습니다. 스타일 창에서 직접 변경할 수 있으며 즉시 적용됩니다. 나는 사실이 모든 것을 시험해보기 위해 항상 사용합니다.
내 책에도 2 분짜리 비디오가 있습니다. 자세한 내용은 here을 참조하십시오. 일부 문서는 http://msdn.microsoft.com/en-us/windows/apps/hh696632에 있습니다.
매우 유익한 정보입니다. 나는 또한 XAML 대 js를 사용하여 평가 중이며, 위의 옵션은 XAML 프로젝트에도 사용할 수 있습니까? – Alwyn