레일스에서 ​​발생하는 문제에 대한 jsfiddle 예제를 게시하려면 어떻게합니까?

Question

이것은 매우 기본적인 질문 일 수 있지만 잔소리에 문제가되는 js, css 및 HTML을 캡처하는 jsfiddle을 게시 할 수 있습니까? 나는 여기에 또 다른 질문을 게시했다 : Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right

... 그리고 나는 jsfiddle에 뭔가를 제안했다. 솔직히, 나는 jsfiddle에 복사하여 붙여 넣을 수있는 방법으로 css, js 및 HTML을 수집하는 방법에 대해 완전히 어둠 속에 빠져 있습니다. 4 개의 필요한 구성 요소를 함께 사용하기위한 매끄러운 방법이 있습니까?

주로 디스플레이 및 레이아웃과 관련된 코드를 공유하고 디버깅하는 데 관심이 있습니다.

미리 감사드립니다.

Answer 1

jsfiddle 및 jsbin 같은 사이트는 HTML, CSS 및 JavaScript와 관련된 다양한 문제의 테스트 베드로 유용합니다. 이를 사용하기위한 좋은 흐름은 다음과 같을 수 있습니다

1. 해당 사이트 중 하나에 가기 전에, 브라우저 디버거를 사용 (방화범, 크롬 디버거, 또는 IE의 현대 버전 당신이해야하는 경우에조차 디버거)에 문제의 역학을 이해하십시오. 예기치 않은 JavaScript 동작이 표시되고 있습니까? 이상한 레이아웃? 문제가 무엇이든 가능한 한 포커스를 좁힐 수 있는지 확인하십시오.
2. 이제 워크 벤치 사이트 중 하나 (직접 계정을 만들어 이전 실험을 찾을 수있게 도와줍니다)로 이동하여 문제를 재현하기 시작합니다. 가능한 한 간단하게 시작하고 일하십시오. 어렵고 좌절 할 수는 있지만 제 경험상 분리 된 테스트 사례를 찾아내는 과정조차도 깨달음으로 이어질 수 있습니다 :-)
3. 이해할 수 없거나 할 수없는 행동을 격리 할 수 ​​있다면 (jsfiddle은 "Save"와 "Update"버튼을 가지고 있고, jsbin은 마술처럼 자동으로 물건을 저장하는 것처럼 보입니다) URL을 여기 (또는 다른 곳)에 게시 할 수 있습니다. 여기에 게시 할 경우 테스트 케이스의 관련 코드를 직접 질문에 복사하는 것이 좋습니다.

나는이 두 사이트를 모두 사용합니다 (더 많은 사이트가있을 수 있습니다). jsbin 사이트는 귀하의 페이지에 대한 통제권을 부여하며 외부 페이지를 볼 수있는 방법을 제공합니다. 모바일 애플리케이션을 테스트하는 경우 중요합니다. 그렇지 않으면 둘 다 훌륭한 리소스입니다.

아, 두 사이트 모두 간단한 구성 도구를 통해 다양한 인기있는 라이브러리를 가져올 수 있습니다. 라이브러리 버전 변경으로 인해 발생할 수 있다고 생각되는 버그를 추적하는 것은 매우 편리합니다 (드물지만 실제로 일어날 때마다 이상한 일입니다).