프론트 엔드 개발자를위한 원격 디버깅-CSS 튜토리얼-php.cn

프론트 엔드 개발자를위한 원격 디버깅 프론트 엔드 개발은 (일종의) 쉬웠습니다. 물리적 또는 가상의 몇 가지 컴퓨터 / 운영 체제에 많은 브라우저를 설치하고 거의 모든 브라우저에 내장 된 개발자 도구를 사용하여 호환성 문제를 해결하거나 다양한 웹 표준 구현을 해결할 수 있습니다. 셀룰러 네트워크가 더 빨라지기 때문에 전화기가 더 똑똑해지고 가벼운 "태블릿"장치가 사람들을 인터넷에 연결할 수있는 또 다른 방법을 제공하는 것이 아니라 더 이상 그렇지 않습니다. 이 (주로) 모바일 장치의 디버깅은 다른 종류의 게임이며, 12 개 이상의 다른 모바일 브라우저가 존재한다는 사실은 작업을 더 쉽게 만들지 않습니다. 이곳은 원격 디버깅이 편리한 곳입니다 키 테이크 아웃

원격 디버깅은 모바일 장치 및 브라우저의 확산으로 인해 프론트 엔드 개발자에게 필수적이되어 모든 플랫폼에서 호환성과 최적의 성능을 보장하는 작업을 복잡하게 만듭니다. Weinre (Web Inspector Remote)는 특히 Linux 또는 Windows에서 개발하고 iOS에서 Safari를 디버깅해야 할 때 다양한 장치에서 웹 페이지를 원격 검사 및 디버깅하는 데 유용한 도구입니다. Weinre의 설치에는 node.js 설치, 정적 IP 주소 얻기, HTTP 서버 설정 및 .weinre 디렉토리에서 Server.Properties 파일 작성을 포함한 여러 단계가 포함됩니다. Valence는 Firefox 개발자 도구가 iOS에서 Gecko 기반 브라우저, Chrome 및 Safari를 원격으로 검사하고 디버깅 할 수있는 Firefox 애드온이지만 Android 장치 에뮬레이터 또는 기존 Android 기기를 검사 할 수없는 것을 포함하여 제한이 있습니다. <.>

weinre

웹 검사관 원격은 다른 장치에서 원격 검사 및 웹 페이지를 디버깅 할 수 있도록 구축되었습니다. Linux 또는 Windows에서 개발하는 동안 iOS에서 A "UiwebView"또는 IOS의 Safari를 디버깅해야 할 때 특히 유용한 도구입니다. weinre

는 webkit의 웹 검사관 프로젝트에서 사용자 인터페이스 코드를 재사용하므로 대부분의 프론트 엔드 개발자는 이미 도구 상자에 익숙해야합니다.

설치 Weinre 설치는 공식 사이트에 문서화되어 있습니다. Node.js 모듈이므로 먼저 설치해야합니다. Mac OSX 및 Linux에서 Node.js를 설치 한 후 설치는 실행 중에 간단합니다.

<span>sudo npm -g install weinre</span>

로그인 후 복사

문서는 Windows에서 Weinre를 사용하는 방법에 대해 명확하지 않으므로 프로세스의 Windows 측면에 약간의 정보를 제공 할 것입니다. 가장 먼저 알아야 할 것은 LocalHost 또는 127.0.0.1의 페이지를 방문하지 않기 때문에 IP 주소입니다. Linux 또는 Mac OS에서 ifconfig 및 Windows에서 ipconfig를 사용하여 IP를 찾을 수 있습니다. 정적 IP 주소는 Weinre를 사용하는 개발자에게 이상적입니다. 그렇지 않으면 컴퓨터를 부팅 할 때마다 IP를 발견해야 할 수도 있습니다! 로컬 네트워크에서 특정 IP 주소를 얻는 방법은이 기사의 범위를 벗어나지 만 Windows의 가이드, Mac OSX를위한 안내서 및 Ubuntu의 가이드가 있습니다. 그런 다음 HTTP 서버가 필요합니다. 모바일 장치에 HTML 파일을로드 할 수 없으므로 컴퓨터의 IP 주소를 알아야합니다!). Node.js, Apache, IIS 또는 Middleman 또는 Jekyll과 같은 정적 사이트 생성기를 사용할 수 있습니다. 워크 플로우에 가장 적합합니다. 중개인에게 간단한 도우미 방법을 추가하는 루그 름도 있습니다. Apache를 사용하고 특히 흥미로운 정적 HTML 파일을 제공하며 원격 검사를하기에 충분한 스타일 만 제공합니다.

weinre runnre 를 실행할 때마다 WeInre를 구성하지 않으려면 .weinre 디렉토리에서 Server.Properties 파일을 만들어야합니다. 프로파일 디렉토리에서 명령 프롬프트를 엽니 다 (Windows 사용자 : You h

in 콘솔을 사용하여 해당 이름의 폴더를 만들어야합니다! WIN R을 누르고 "CMD"를 입력하거나 "Windows"키를 누르십시오. "명령 프롬프트"의 문자 그런 다음 Enter를 누르고 Mkdir .weinre를 입력하여 새 디렉토리를 만듭니다. Windows 사용자의 결과 경로는 C : usersyou_user_name.weinre. 이 폴더가 준비되면 다음 내용이있는 Server.Properties 내부에 새 텍스트 파일을 만듭니다. httpport를 자유롭게 바꾸십시오. 이제 명령 프롬프트에서 Weinre를 입력하여 Weinre를 실행할 수 있어야하며 Weinre 서버는 선택한 포트를들을 것입니다. 디버그 해야하는 페이지에 다음 줄을 추가하십시오 (또는 위의 위의 테스트 HTML 파일) :

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>
<span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>WEb INspector REmote<span><span></title</span>></span>
</span>  <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1"</span>></span>
</span>  <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.min.css"</span>></span>
</span>
  <span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.flex-wrapper</span> {
</span></span></span><span><span>      <span>display: -webkit-box;
</span></span></span><span><span>      <span>display: -webkit-flex;
</span></span></span><span><span>      <span>display: -ms-flexbox;
</span></span></span><span><span>      <span>display: flex;
</span></span></span><span><span>      <span>-webkit-flex-wrap: wrap;
</span></span></span><span><span>          <span>-ms-flex-wrap: wrap;
</span></span></span><span><span>              <span>flex-wrap: wrap;
</span></span></span><span><span>    <span>}
</span></span></span><span><span>
</span></span><span><span>    <span><span>.flex-box</span> {
</span></span></span><span><span>      <span>-webkit-box-flex: 1;
</span></span></span><span><span>      <span>-webkit-flex: 1 1 30em;
</span></span></span><span><span>          <span>-ms-flex: 1 1 30em;
</span></span></span><span><span>              <span>flex: 1 1 30em;
</span></span></span><span><span>    <span>}
</span></span></span><span><span>  </span><span><span></style</span>></span>
</span><span><span><span></head</span>></span>
</span>
<span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="wrapper"</span>></span>
</span>  <span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="large-10 large-offset-1 column"</span>></span>
</span>      <span><span><span><h1</span>></span>Remote Debugging for Front-end Developers<span><span></h1</span>></span>
</span>
      <span><span><span><div</span> class<span>="flex-wrapper"</span>></span>
</span>        <span><span><span><div</span> class<span>="flex-box"</span>></span>
</span>          <span><span><span><p</span>></span>Front-end development used to be (kind of) easy.
</span>          One could easily install a bunch of browsers on a couple 
          of different computers / operating systems, physical 
          or virtual, and use the developer tools built in almost 
          every browser to solve compatibility problems, or work 
          around different implementations of web standards. 
          This is no longer the case, not since cellular networks 
          became faster, phones became smarter and light “tablet” 
          devices offered a new way to connect people to the internet 
          from wherever they are. Debugging in these (mostly) 
          mobile devices is a different kind of game, and the fact 
          that more than a dozen different mobile browsers 
          exist is not making the job any easier.<span><span><span></p</span>></span>
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="flex-box"</span>></span>
</span>          <span><span><span><blockquote</span> cite<span>="http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html"</span>></span>
</span>            <span><span><span><p</span>></span>weinre is WEb INspector REmote. Pronounced like
</span>            the word “winery”. Or maybe like the word “weiner”. Who 
            knows, really.<span><span><span></p</span>></span>
</span>          <span><span><span></blockquote</span>></span>
</span>          <span><span><span><p</span>></span>WEb INspector REmote was built to enable remote inspection 
</span>          and debugging of web pages across different devices. It’s a 
          useful tool, especially when you need to debug a ”UIWebView” 
          or Safari on iOS while developing on Linux or Windows. weinre 
          *reuses the user interface code from the Web Inspector project 
          at WebKit* so most front-end developers should already be  
          familiar with the toolbox.<span><span><span></p</span>></span>
</span>        <span><span><span></div</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

로그인 후 복사