KR101961970B1

KR101961970B1 - 실행 페이지의 동적 갱신 기법

Info

Publication number: KR101961970B1
Application number: KR1020137033978A
Authority: KR
Inventors: 마이클 씨 파닝; 매튜 홀; 개리 린스콧; 이브게니 티보런
Original assignee: 마이크로소프트 테크놀로지 라이센싱, 엘엘씨
Priority date: 2011-06-23
Filing date: 2012-06-06
Publication date: 2019-07-17
Also published as: EP2724258A2; EP2724258A4; JP2014520342A; WO2012177394A3; KR20140048139A; CN103635897B; JP5941540B2; CN103635897A; US10534830B2; US20120331375A1; WO2012177394A2

Abstract

일 실시예는 텍스트 소스 문서를 파싱(parsing)하여, 문서 노드 트리가 문서 노드 트리의 각각의 노드에 대응하는 텍스트 소스 문서 내의 텍스트의 위치를 지시하는 텍스트 오프셋들을 포함하도록 문서 노드 트리를 구성하는 단계를 포함하는 방법을 제공한다. 이 방법은 문서 노드 트리로부터 문서 객체 모델(DOM) 및 DOM을 표현하는 뷰 노드 트리를 구성하는 단계를 포함한다. 뷰 노드 트리의 구성은 뷰 노드 트리를 문서 노드 트리에 맵핑하는 단계를 포함한다. 이 방법은 DOM의 실행 표현을 제공하는 단계, 및 제1 변경 정보를 제공하기 위해 DOM에 대한 변경을 추적하는 단계와 제2 변경 정보를 제공하기 위해 텍스트 소스 문서에 대한 변경을 추적하는 단계 중 하나를 포함한다.

Description

실행 페이지의 동적 갱신 기법{DYNAMICALLY UPDATING A RUNNING PAGE}

웹 개발 도구들은 개발자들로 하여금 하이퍼텍스트 마크업 언어(HyperText Markup Language(HTML)) 및 캐스케이딩 스타일 시트(Cascading Style Sheets(CSS)) 문제들을 진단하는 것을 가능하게 한다. 개발자들은 CSS 선택기들을 포함하는 문서 객체 모델(Document Object Model(DOM)) 요소들을 동적으로 수정하고, 브라우저에서 실행 페이지에 즉시 반영된 변경들을 볼 수 있다. 그러나, 페이지가 유래하는 마크업 소스 문서에 수정들을 영구적으로 적용하기 위해 개발자는 원하는 수정과 관련된 마크업 텍스트 또는 근원 JavaScript를 찾아서 적절히 수정하는 것이 필요하다. 그러나, 원하는 수정과 관련된 소스 코드 텍스트를 찾는 것은 어려울 수 있는데, 그 이유는 관련 소스 코드 텍스트가 즉시 명백하지 않거나 개발자에게 친숙하지 않은 코드에서 생성될 수 있기 때문이다. 게다가, 원하는 수정과 관련된 소스 코드 텍스트를 찾으면, 수정을 적용하고 브라우저에서 수정의 결과들을 실제로 보기 위해 여러 단계가 필요할 수 있다.

본 요약은 상세한 설명 부분에서 더 후술하는 개념들의 발췌를 간단한 형태로 소개하기 위해 제공된다. 본 요약은 청구 발명 대상의 중요한 특징들 또는 필수적인 특징들을 식별하는 것을 의도하지 않으며, 청구 발명 대상의 범위를 한정하는 데 사용되는 것도 의도하지 않는다.

일 실시예는 텍스트 소스 문서를 파싱(parsing)하여, 문서 노드 트리가 문서 노드 트리의 각각의 노드에 대응하는 텍스트 소스 문서 내의 텍스트의 위치를 지시하는 텍스트 오프셋들을 포함하도록 문서 노드 트리를 구성하는 단계를 포함하는 방법을 제공한다. 이 방법은 문서 노드 트리로부터 문서 객체 모델(DOM) 및 DOM을 표현하는 뷰 노드 트리를 구성하는 단계를 포함한다. 뷰 노드 트리의 구성은 뷰 노드 트리를 문서 노드 트리에 맵핑하는 단계를 포함한다. 이 방법은 DOM의 실행 표현을 제공하는 단계, 및 제1 변경 정보를 제공하기 위해 DOM에 대한 수정을 추적하는 단계와 제2 변경 정보를 제공하기 위해 텍스트 소스 문서에 대한 수정을 추적하는 단계 중 하나를 포함한다.

첨부 도면들은 실시예들의 추가적인 이해를 제공하기 위해 포함되며, 본 명세서에 통합되어 그 일부를 구성한다. 도면들은 실시예들을 도시하며, 명세서와 더불어 실시예들의 원리들을 설명하는 데 사용된다. 다른 실시예들 및 실시예들의 소기의 장점들 중 다수가 쉽게 인식될 것이며, 이들은 아래의 상세한 설명을 참조함으로써 더 잘 이해된다. 도면들의 요소들은 반드시 서로에 대해 일정한 비율로 그려진 것은 아니다. 동일한 참조 번호들은 대응하는 유사한 요소들을 지시한다.
도 1은 웹 개발 도구의 일 실시예를 나타내는 블록도이다.
도 2는 도 1에 도시된 웹 개발 도구의 양태들을 구현하는 데 적합한 컴퓨팅 장치/환경의 일 실시예를 나타내는 블록도이다.
도 3은 웹 개발 도구의 일 실시예를 나타내는 기능 블록도이다.
도 4는 문서 노드 트리에 맵핑된 HTML 텍스트의 일례를 나타내는 블록도이다.
도 5는 뷰 노드 트리에 맵핑된 문서 노드 트리의 일례를 나타내는 블록도이다.
도 6은 브라우저 인스턴스에 의해 표현된 DOM에 대한 뷰 노드 트리의 일례를 나타내는 블록도이다.
도 7은 수정 전후의 문서 노드 트리의 일례를 나타내는 블록도이다.
도 8은 수정에 대한 변경 레코드의 일례를 나타내는 블록도이다.
도 9는 마크업 텍스트 소스 문서에 대한 수정들에 기초하여 실행 웹페이지를 동적으로 갱신하고, 실행 웹페이지에 대한 수정들에 기초하여 마크업 텍스트 소스 문서를 동적으로 갱신하기 위한 방법의 일 실시예를 나타내는 흐름도이다.

아래의 상세한 설명에서는, 그 일부를 구성하고 본 발명이 실시될 수 있는 특정 실시예들의 예시로서 도시된 첨부 도면들을 참조한다. 본 발명의 범위로부터 벗어나지 않으면서 다른 실시예들이 이용될 수 있으며 구조적 또는 논리적 변경들이 이루어질 수 있다는 것을 이해해야 한다. 따라서, 아래의 상세한 설명은 한정적인 것으로 간주되지 않아야 하며, 본 발명의 범위는 첨부된 청구항들에 의해 정의된다.

본 명세서에서 설명되는 다양한 실시예들의 특징들은 구체적으로 달리 언급되지 않는 한은 서로 결합될 수 있다는 것을 이해해야 한다.

도 1은 웹 개발 도구(100)의 일 실시예를 나타내는 블록도이다. 웹 개발 도구(100)는 텍스트 소스 문서(102) 및 텍스트 소스 문서의 실행 표현(104)을 포함한다. 일 실시예에서, 텍스트 소스 문서(102)는 웹페이지 소스 코드 에디터 내에서 열린다. 다른 실시예들에서, 텍스트 소스 문서(102) 또는 텍스트 소스 문서(102)의 부분들은 웹페이지 소스 코드 뷰어 내에 표시된다. 일 실시예에서, 텍스트 소스 문서(102)의 실행 표현(104)은 브라우저에 의해 제공된다. 다른 실시예들에서, 텍스트 소스 문서(102)의 실행 표현(104)은 텍스트 소스 문서의 실행 표현의 설계자, 특성 창 또는 다른 적절한 가시화에 의해 제공된다.

웹페이지 소스 코드에 대한 수정을 실행 표현(104)에 의해 표현되는 바와 같은 웹페이지의 실행 페이지 인스턴스에 적용하여, 웹페이지 소스 코드에 대한 수정을 포함하도록 실행 페이지 인스턴스를 동적으로 갱신한다. 또한, 웹페이지의 실행 페이지 인스턴스 내의 DOM 요소에 대한 수정을 웹페이지 소스 코드에 적용하여, DOM 요소에 대한 수정을 포함하도록 웹페이지 소스 코드를 동적으로 갱신한다. 이러한 방식으로, 웹페이지 개발자는 브라우저에서 웹페이지의 실행 인스턴스 내의 DOM 요소들을 수정할 수 있고/있거나, 웹페이지 소스 코드를 수정할 수 있으며, 수정들을 웹페이지 소스 코드 및/또는 웹페이지의 실행 인스턴스에 각각 동적으로 적용된다.

텍스트 소스 문서(102)의 웹페이지 소스 코드는 실행 표현(104)에 의해 표현되는 바와 같은 웹페이지의 실행 페이지 인스턴스 내의 관련 문서 객체 모델(DOM)(110)에 링크(112)를 통해 링크된다. 따라서, 실행 표현(104) 내의 DOM 요소를 선택 또는 강조함으로써, 선택 또는 강조된 DOM 요소와 관련된 웹페이지 텍스트가 텍스트 소스 문서(102) 내에서 선택 또는 강조된다. 또한, 텍스트 소스 문서(102) 내의 웹페이지 텍스트의 일부를 선택 또는 강조함으로써, 선택 또는 강조된 웹페이지 텍스트의 일부와 관련된 DOM 요소 또는 요소들이 실행 표현(104) 내에서 선택 또는 강조된다. 이러한 방식으로, 웹페이지 개발자는 DOM 요소들이 DOM 요소들을 정의하는 웹페이지 텍스트 소스 코드를 이용하여 웹페이지의 실행 인스턴스 내에 표현될 때 즉시 DOM 요소들을 매칭시킬 수 있다.

일 실시예에서, 텍스트 소스 문서(102)는 웹페이지 텍스트 소스 문서들을 열고, 생성하고, 편집하고, 저장하는 데 적합한 임의의 적절한 텍스트 편집기를 포함하는 소스 코드 편집기 내에 열린다. 일 실시예에서, 소스 코드 편집기에 의해 편집될 수 있는 웹페이지 텍스트 소스 문서들은 하이퍼텍스트 마크업 언어(HTML), 캐스케이딩 스타일 시트(CSS), 확장형 마크업 언어(XML) 및/또는 확장형 하이퍼텍스트 마크업 언어(XHTML)와 같은 마크업 텍스트를 포함한다. 웹페이지 텍스트 소스 문서들은 JavaScript 또는 JScript도 포함할 수 있다. 본 명세서에서 사용될 때, "JS"는 JavaScript 및 JScript 양자를 지칭하는 데 사용된다. 다른 실시예들에서, 소스 코드 편집기는 다른 적절한 웹페이지 마크업 텍스트 및 스크립팅 언어들을 포함하는 웹페이지 텍스트 소스 문서들을 열고, 생성하고, 편집하고, 저장하는 데 적합하다. 일 실시예에서, 소스 코드 편집기는 웹페이지 텍스트 소스 문서들의 다수의 인스턴스를 지원하며, 따라서 관련된 또는 링크된 웹페이지 텍스트 소스 문서들이 소스 코드 편집기 내에 동시에 열릴 수 있다.

일 실시예에서, 실행 표현(104)은 DOM(110)을 포함하는 데 적합한 웹 브라우저이다. 일 실시예에서, 브라우저는 월드 와이드 웹 콘소시엄(W3C) 준수(compliant) 웹 브라우저이다. 일 실시예에서, 브라우저는 DOM(110)의 브라우저 불가지론 표현을 제공하며, 따라서 DOM(110)의 표현은 인터넷 익스플로러, 파이어폭스, 크롬, 사파리 또는 오페라와 같은 임의의 특정 브라우저에 의존하지 않는다. 다른 실시예에서, 브라우저는 DOM(110)이 표현이 선택되는 브라우저에 기초하도록 선택된다. 브라우저는 사용자가 DOM(110)의 표현이 기초로 하는 인터넷 익스플로러, 파이어폭스, 크롬, 사파리 또는 오페라와 같은 특정 브라우저를 선택하기 위한 옵션을 포함할 수 있다. 일 실시예에서, 브라우저는 DOM들의 다수의 인스턴스를 지원하며, 따라서 관련된 또는 링크된 웹페이지들이 브라우저 내에서 동시에 실행될 수 있다. 실행 표현(104)은 실행 스크립트(108) 및 애플리케이션 프로그래밍 인터페이스(API)도 포함할 수 있다. 스크립트(108) 및 API(106)는 실행 표현(104) 내의 DOM(110) 내의 DOM 요소들을 수정, 삭제 및/또는 삽입할 수 있다.

도 2는 도 1과 관련하여 이전에 설명되고 도시된 웹 개발 도구(100)의 양태들을 구현하는 데 적합한 컴퓨팅 장치/환경(200)의 일 실시예를 나타내는 블록도이다. 컴퓨팅 장치/환경(200)은 하나 이상의 처리 유닛(212) 및 시스템 메모리(214)를 포함한다. 컴퓨팅 장치/환경(200)의 정확한 구성 및 타입에 따라, 메모리(214)는 (RAM과 같은) 휘발성, (ROM, 플래시 메모리 등과 같은) 비휘발성 또는 이 둘의 소정 조합일 수 있다.

컴퓨팅 장치/환경(200)은 추가적인 특징들/기능도 가질 수 있다. 예를 들어, 컴퓨팅 장치/환경(200)은 자기 또는 광 디스크들 또는 테이프를 포함하지만 이에 한정되지 않는 추가적인 (이동식 및/또는 비이동식) 저장 장치도 포함할 수 있다. 그러한 추가적인 저장 장치는 도 2에 이동식 저장 장치(216) 및 비이동식 저장 장치(218)에 의해 도시된다. 컴퓨터 저장 매체는 컴퓨터 판독 가능 명령어들, 데이터 구조들, 프로그램 모듈들 또는 다른 데이터와 같은 정보의 저장을 위한 임의의 적절한 방법 또는 기술에서 구현되는 휘발성 및 비휘발성, 이동식 및 비이동식 매체를 포함한다. 메모리(214), 이동식 저장 장치(216) 및 비이동식 저장 장치(218)는 모두 컴퓨터 저장 매체(예를 들어, 적어도 하나의 프로세서에 의해 실행될 때 적어도 하나의 프로세서로 하여금 방법을 수행하게 하는 컴퓨터 실행 가능 명령어들을 저장하는 컴퓨터 판독 가능 저장 매체)의 예들이다. 컴퓨터 저장 매체는 RAM, ROM, EEPROM, 플래시 메모리 또는 다른 메모리 기술, CD-ROM, 디지털 다기능 디스크(DVD) 또는 다른 광학 저장 장치, 자기 카세트, 자기 테이프, 자기 디스크 저장 장치 또는 다른 자기 저장 장치, 또는 원하는 정보를 저장하는 데 사용될 수 있고 컴퓨팅 장치/환경(200)에 의해 액세스될 수 있는 임의의 다른 매체를 포함하지만, 이에 한정되지 않는다. 임의의 그러한 컴퓨터 저장 매체는 컴퓨팅 장치/환경(200)의 일부일 수 있다.

컴퓨팅 장치/환경(200)의 다양한 요소들은 하나 이상의 통신 링크(215)를 통해 함께 통신 가능하게 결합될 수 있다. 컴퓨팅 장치/환경(200)은 컴퓨팅 장치/환경(200)으로 하여금 다른 컴퓨터들/애플리케이션들(226)과 통신할 수 있게 하는 하나 이상의 통신 접속(224)도 포함한다. 컴퓨팅 장치/환경(200)은 키보드, 포인팅 장치(예를 들어, 마우스), 펜, 음성 입력 장치, 터치 입력 장치 등과 같은 입력 장치(들)(222)도 포함할 수 있다. 컴퓨팅 장치/환경(200)은 디스플레이, 스피커, 프린터 등과 같은 출력 장치(들)(220)도 포함할 수 있다.

도 2 및 위의 설명은 하나 이상의 실시예를 구현할 수 있는 적절한 컴퓨팅 환경의 간단한 일반적인 설명을 제공하는 것을 의도하며, 실시예들의 이용 또는 기능의 범위에 관한 어떠한 한정도 제안하고자 하는 의도는 없다.

도 3은 웹 개발 도구(300)의 일 실시예를 나타내는 기능 블록도이다. 일 실시예에서, 웹 개발 도구(300)는 도 1과 관련하여 이전에 설명되고 도시된 웹 개발 도구(100)를 제공한다. 웹 개발 도구(300)는 마크업 텍스트(302), 마크업 파서(306), 문서 노드 트리(310), DOM 구성기(314), 브라우저(318), DOM 수정 청취기(322) 및 마크업 직렬화기(328)를 포함한다. 마크업 텍스트(302)는 304에 지시되는 바와 같이 마크업 파서(306)에 입력된다. 마크업 파서(306)는 308에 지시되는 바와 같이 문서 노드 트리(310)를 출력한다. 문서 노드 트리(310)는 312에 지시되는 바와 같이 DOM 구성기(314)에 입력된다. DOM 구성기(314)는 316에 지시되는 바와 같이 DOM을 브라우저(318)로 출력한다. DOM 수정 청취기(322)는 320에 지시되는 바와 같이 브라우저(318) 내에서 DOM 요소들에 대한 변경들을 추적한다. DOM 수정 청취기(322)는 324에 지시되는 바와 같이 변경 정보를 문서 노드 트리(310)로 출력한다. 마크업 직렬화기(328)는 326에 지시되는 바와 같이 문서 노드 트리(310)로부터 변경 정보를 수신한다. 마크업 직렬화기(328)는 330에 지시되는 바와 같이 직렬화된 변경 정보를 이용하여 마크업 텍스트(302)를 갱신한다.

마크업 텍스트(302)는 HTML, CSS, XML, XHTML 및/또는 다른 적절한 마크업 텍스트를 포함한다. 일 실시예에서, 마크업 텍스트(302)를 포함하는 소스 문서가 소스 코드 편집기 내에 열린다. 다른 실시예들에서, 웹 개발 도구(300)는 소스 코드 편집기 내에 소스 문서를 열지 않고 마크업 텍스트(302)를 포함하는 소스 문서에 액세스한다. 마크업 텍스트(302)는 웹페이지를 제공하기 위한 임의의 적절한 수의 객체를 정의한다. 도 3에 도시된 예에서, 마크업 텍스트(302)는 HTML을 포함한다. 예시적인 HTML은 텍스트 "Hello"를 포함하는 DOM 요소를 제공하기 위한 하나의 객체를 정의한다.

마크업 텍스트(302)의 텍스트 성질로 인해, 마크업 텍스트(302)의 각각의 문자는 332에 지시되는 바와 같은 대응하는 라인 번호 및 334에 지시되는 바와 같은 라인에 대한 대응하는 상대적인 문자 번호를 갖는다. 예를 들어, 마크업 텍스트(302) 내의 문자 "H"는 라인 2, 문자 8에 있다. 마크업 텍스트(302)의 각각의 문자는 마크업 텍스트(302)의 시작에 대한 문자의 위치를 지시하는 문자 번호도 갖는다. 예를 들어, 마크업 텍스트(302) 내의 문자 "H"는 마크업 텍스트(302) 내의 26 번째 문자이므로 26의 문자 번호를 갖는다. 따라서, 마크업 텍스트(302) 내의 각각의 문자는 라인 번호 및 라인 내의 위치에 기초하여 또는 마크업 텍스트(302)의 시작에 대한 문자의 위치를 지시하는 문자 번호에 기초하여 위치가 결정될 수 있다. 또한, 마크업 텍스트(302) 내의 일련의 문자들은 라인 번호들 및 라인들 내의 위치들의 범위에 기초하여 또는 문자 번호들의 범위에 기초하여 위치가 결정될 수 있다. 본 명세서에서 사용될 때, 라인 번호들 및 라인들 내의 위치들의 이러한 범위들 또는 문자 번호들의 범위들은 "텍스트 오프셋들"로서 지칭된다.

마크업 파서(306)는 마크업 텍스트(302)를 파싱하여, 문서 노드 트리(310)를 구성한다. 일 실시예에서, 마크업 파서(306)는 소스 코드 편집기와 동일한 컴퓨팅 장치/환경 상에 배치된다. 다른 실시예에서, 마크업 파서(306)는 소스 코드 편집기와 다른 컴퓨팅 장치/환경 상에 배치된다. 마크업 파서(306)는 HTML 파서, CSS 파서, XML 파서, XHTML 파서 및/또는 다른 적절한 마크업 텍스트 파서들을 포함한다. 일 실시예에서, 마크업 파서(306)는 W3C를 따른다. 다른 실시예에서, 마크업 파서(306)는 인터넷 익스플로러, 파이어폭스, 크롬, 사파리 또는 오페라와 같은 특정 브라우저와 관련된 파서에 기초한다. 다른 실시예들에서, 마크업 파서(306)는 특정 브라우저와 관련된 파서의 기본 구현과 특정 브라우저 런타임 실행 및/또는 파스 거동의 지식에 기초하는 파싱 구현 내의 변경들을 함께 포함하는 하이브리드 파서이다.

마크업 파서(306)는 문서 노드 트리(310) 내에 웹페이지들과 관련된 마크업 텍스트(302)로부터의 소스 문서 상세들을 포함시킨다. HTML 객체들 및 CSS 객체들에 더하여, 마크업 파서(306)는 브라우저들에 의해 해석될 수 있는 문서 타입(doctype) 및 소스내(in-source) 코멘트들과 같은 마크업 텍스트(302)로부터의 다른 상세들을 포함시킨다. 마크업 파서(306)는 또한 마크업 텍스트(302) 내의 소스 문서 상세들의 위치를 지시하는 텍스트 오프셋들을 문서 노드 트리(310) 내에 포함시킨다. 텍스트 오프셋들은 문서 노드 트리(310)의 각각의 노드를 노드와 관련된 마크업 텍스트에 맵핑한다. 이러한 방식으로, 파싱 프로세스 동안 문서 노드 트리(310)와 마크업 텍스트(302) 사이의 링크가 유지된다. 이것은 마크업 파서(306)와 브라우저들 내에 통합된 전통적인 파서들을 구별하며, 전통적인 파서들은 성능의 이유로 렌더링 동안 종종 소스 문서 상세들을 폐기 또는 변환하고, 소스 문서와 렌더링되는 문서 사이의 임의의 링크를 유지하지 않는다.

도 3에 도시된 예에서, 문서 노드 트리(310)는 문자 번호들의 범위들을 텍스트 오프셋들로서 사용한다. 예를 들어, 문서 노드 트리(310)는 부모 노드 "DIV"에 대한 텍스트 오프셋 "text span: 1-42"를 포함하며, 이는 마크업 텍스트(302) 내의 객체 "DIV"의 위치를 지시한다. 또한, 문서 노드 트리(310)는 속성 "id"에 대한 텍스트 오프셋 "text span: 6-15", 자식 노드 "P"에 대한 텍스트 오프셋 "text span: 23-24" 및 자식 노드 "Hello"에 대한 텍스트 오프셋 "text span: 26-30"을 포함한다. 따라서, 문서 노드 트리(310) 내에 각각의 객체에 대한 텍스트 오프셋들을 포함시킴으로써, 문서 노드 트리(310) 내의 각각의 객체는 객체와 관련된 소스 문서 마크업 텍스트에 맵핑된다.

DOM 구성기(314)는 문서 노드 트리(310)로부터 DOM 및 DOM을 표현하는 뷰 노드 트리를 구성한다. DOM 구성기(314)는 뷰 노드 트리의 각각의 노드를 문서 노드 트리의 대응하는 노드에 맵핑하며, 따라서 DOM의 각각의 요소는 문서 노드 트리(310) 내의 관련 객체에, 따라서 객체와 관련된 소스 문서 마크업 텍스트에 링크된다. 일 실시예에서, DOM 구성기(314)는 DOM에 대한 수정들을 추적하기 위해 DOM 내에 이벤트 청취기들을 삽입한다.

일 실시예에서, DOM 구성기(314)는 JS 요소들을 구성한다. JS 요소들은 실행시에 DOM 요소들, 및 문서 노드 트리(310) 내에 대응하는 노드들을 갖지 않을 수 있는 뷰 노드 트리 내의 대응하는 노드들을 구성 및/또는 수정할 수 있다.

일 실시예에서, DOM 구성기(314)는 인터넷 익스플로러, 파이어폭스, 크롬, 사파리 또는 오페라와 같은 임의의 특정 브라우저에 의존하지 않는 브라우저 불가지론 DOM을 구성한다. 다른 실시예에서, DOM 구성기(314)는 DOM이 선택된 브라우저에 기초하여 구성되도록 선택된다. DOM 구성기(314)는 사용자가 DOM의 구성이 기초로 하는 인터넷 익스플로러, 파이어폭스, 크롬, 사파리 또는 오페라와 같은 특정 브라우저를 선택하기 위한 옵션을 포함할 수 있다. 구성된 DOM은 브라우저(318)에 의해 표시된다. 일 실시예에서, 브라우저(318)는 W3C 준수 브라우저이다. 도 3에 도시된 예에서, 브라우저(318)는 마크업 텍스트(302)에 의해 정의되는 바와 같은 텍스트 "Hello"를 포함하는 DOM 요소를 표시한다.

뷰 노드 트리 및 문서 노드 트리(310)는 브라우저(318) 내의 DOM 요소들을 마크업 텍스트(302)에 링크한다. 예를 들어, 브라우저 내의 "Hello"를 선택 또는 강조함으로써, 마크업 텍스트(302) 내의 관련 마크업 텍스트가 선택 또는 강조된다. 이와 달리, 마크업 텍스트(302) 내의 "Hello"를 선택 또는 강조함으로써, 브라우저(318) 내의 관련 DOM 요소 "Hello"가 선택 또는 강조된다.

DOM 수정 청취기(322)는 브라우저(318) 내에서 DOM 모음 변화(mutation)와 같은 DOM 요소에 대한 변경들을 추적한다. 일 실시예에서, DOM 수정 청취기(322)는 API(106) 및/또는 스크립트(108)(도 1)에 기인하는 DOM 요소들에 대한 변경들을 추적한다. 일 실시예에서, DOM 수정 청취기(322)는 DOM 요소의 각각의 변경에 대한 변경 레코드를 생성한다. 각각의 변경 레코드는 수정된 DOM 요소를 뷰 노드 트리의 노드 및 노드에 적용된 변경에 의해 식별한다. 변경 레코드는 또한 삭제 또는 삽입된 DOM 요소를 식별할 수 있다. 이어서, DOM 수정 청취기(322)는 변경 레코드에 기초하여 문서 노드 트리(310) 내의 대응하는 노드를 갱신한다.

일 실시예에서, 사용자가 특성 패널 또는 다른 적절한 메커니즘을 통해 요소 속성들 및/또는 스타일 특성들을 수정함으로써 문서 노드 트리(310)를 통해 DOM 요소들에 대해 변경들이 행해질 수 있다. 이 실시예에서, 특성 패널은 요소의 각각의 변경에 대한 변경 레코드를 생성한다. 각각의 변경 레코드는 수정할 요소를 문서 노드 트리의 노드 및 노드에 적용할 변경에 의해 식별한다. 변경 레코드는 변경 레코드에 기초하여 문서 노드 트리(310) 내의 노드를 갱신한다. 이어서, DOM 구성기(314)는 브라우저(318) 내의 DOM의 표현은 수정을 포함하도록 갱신된 문서 노드 트리(310)에 기초하여 DOM 및 DOM을 표현하는 뷰 노드 트리를 갱신한다.

마크업 직렬화기(328)는 마크업 텍스트(302)를 갱신하기 위해 문서 노드 트리(310) 내의 변경 정보를 직렬화한다. 마크업 직렬화기(328)는 갱신된 문서 노드 트리(310)에 매칭되도록 마크업 텍스트(302)를 수정하는 데 필요한 정보를 포함하도록 (예를 들어, DOM 수정 청취기(322)로부터의 또는 특성 패널로부터의 변경 레코드들에 기인하여) 문서 노드 트리(310)에 대한 변경들을 포맷팅한다. 일 실시예에서, 마크업 직렬화기(328)에 의해 제공되는 정보는 마크업 텍스트(302)에서 변경이 행해질 위치를 지시하는 텍스트 오프셋들 및 지시된 위치에 배치할 새로운 값을 포함한다. 일 실시예에서, 마크업 직렬화기(328)는 사용자 액션에 응답하여 묶음 프로세스(batch process)에서 마크업 텍스트(302)를 갱신하기 위해 문서 노드 트리(310)의 복수의 변경에 대한 변경 정보를 직렬화된 단일 데이터 파일로 결합한다. 다른 실시예에서, 마크업 직렬화기(328)는 묶음 프로세스에서 다수의 데이터 파일을 포함하는 마크업 텍스트(302)를 갱신할 수 있다.

소스 코드 편집기 내에서 마크업 텍스트(302)에 대한 변경들도 행해질 수 있다. 일 실시예에서, 마크업 텍스트(302)에 대한 변경 후, 마크업 파서(306)는 마크업 텍스트(302)의 부분 파싱을 수행하여 문서 노드 트리(310)를 갱신한다. 다른 실시예에서, 마크업 텍스트(302)에 대한 변경 후, 마크업 파서(306)는 마크업 텍스트(302)의 전체 파싱을 수행하여 문서 노드 트리(310)를 갱신한다. 이어서, DOM 구성기(314)는 마크업 텍스트(302)에 대한 변경이 브라우저(318) 내에 반영되도록 DOM 및 DOM을 표현하는 뷰 노드 트리를 갱신한다.

도 4는 문서 노드 트리(404)에 맵핑된 HTML 텍스트(402)의 일례(400)를 나타내는 블록도이다. HTML 텍스트(402)로부터 문서 노드 트리(404)를 구성하기 위하여, HTML 텍스트(402)는 도 3과 관련하여 이전에 설명되고 도시된 마크업 파서(306)와 같은 마크업 텍스트 파서에 의해 파싱된다. 도 4에 도시된 예에서, HTML 텍스트(402)는 문서 노드 트리(402)가 부모 노드 "DIV" 및 자식 노드들 "SPAN" 및 "P"를 포함하도록 파싱된다. 자식 노드 "SPAN"은 추가적인 자식 노드 "TEXT(Hello)"를 포함한다. 자식 노드 "P"는 추가적인 자식 노드 "TEXT(World)" 및 "foo"의 값을 갖는 "class"의 특성을 포함한다.

따라서, 문서 노드 트리(404)는 HTML 텍스트(402) 소스 문서 상세들을 구조화된 트리 포맷으로 유지한다. 도 3과 관련하여 이전에 설명되고 도시된 바와 같이, 문서 노드 트리(404)는 각각의 부모 및 자식 모드 각각과 관련된 HTML 텍스트(402) 내의 HTML 텍스트의 특정 위치를 지시하기 위해 각각의 부모 및 자식 노드에 대한 텍스트 오프셋도 포함한다.

도 5는 뷰 노드 트리(508)에 맵핑된 문서 노드 트리(506)의 일례(500)를 나타내는 블록도이다. 문서 노드 트리(506)는 마크업 문서(502)에 대한 소스 문서 상세들을 구조화된 트리 포맷으로 제공한다. 뷰 노드 트리(508)는 HTML 인스턴스 관리기(504) 내에 DOM의 하나의 인스턴스를 표시한다. 일 실시예에서, HTML 인스턴스 관리기(504)는 뷰 노드 트리들의 다수의 인스턴스를 관리할 수 있다. 일 실시예에서, HTML 인스턴스 관리기(504) 내에 DOM을 표시하는 뷰 노드 트리(508)는 선택된 브라우저에 기초한다. HTML 인스턴스 관리기(504)는 사용자가 뷰 노드 트리(508)가 기초로 하는 인터넷 익스플로러, 파이어폭스, 크롬, 사파리 또는 오페라와 같은 특정 브라우저를 선택하기 위한 옵션을 포함할 수 있다.

뷰 노드 트리(508)의 각각의 노드는 각각의 노드를 문서 노드 트리(506) 내의 관련 노드에 맵핑하는 식별자를 포함한다. 일 실시예에서, 식별자는 도 3과 관련하여 이전에 설명되고 도시된 DOM 구성기(314)에 의해 뷰 노드 트리의 각각의 노드에 할당된다. 일 실시예에서, 식별자는 번호이다. 도 5에 도시된 예에서, 뷰 노드 트리(508)의 식별자 "105"는 문서 노드 트리(506)의 부모 노드 "DIV"에 맵핑된다. 또한, 식별자 "106"은 자식 노드 "SPAN"에 맵핑되고, 식별자 "107"은 자식 노드 "TEXT(Hello)"에 맵핑된다. 따라서, 뷰 노드 트리의 각각의 식별자는 뷰 노드 트리의 노드를 문서 노드 트리 내의 관련 노드에 링크한다.

도 6은 브라우저 인스턴스(614)에 의해 표현된 DOM에 대한 뷰 노드 트리(610)의 일례(600)를 나타내는 블록도이다. 애플리케이션(602)은 뷰 노드 트리(610)를 관리하는 HTML 인스턴스 관리기(608)를 포함한다. 일 실시예에서, HTML 인스턴스 관리기(608)는 뷰 노드 트리들의 다수의 인스턴스를 관리한다. 애플리케이션(606)은 브라우저 인스턴스(614)를 관리하는 인스턴스 관리기(612)를 포함한다. 일 실시예에서, 인스턴스 관리기(612)는 다수의 브라우저 인스턴스를 관리한다. 브라우저 인스턴스는 DOM의 인스턴스를 표현한다. 애플리케이션(602)은 통신 링크(COM)(604)를 통해 애플리케이션(606)에 통신 가능하게 결합된다.

뷰 노드 트리(610)의 각각의 노드의 식별자는 뷰 노드 트리(610) 내에 각각의 "DOM proxy"에 의해 지시되는 바와 같이 브라우저 인스턴스(614)에 의해 표현되는 관련 DOM 요소에 링크된다. 따라서, 브라우저 인스턴스(614)에 의해 표현되는 각각의 DOM 요소는 뷰 노드 트리(610)의 노드에 링크 또는 맵핑된다. 따라서, 브라우저 인스턴스(614) 내에 표현되는 각각의 DOM 요소는 뷰 노드 트리 및 문서 노드 트리를 통해 마크업 텍스트 소스 문서 내의 마크업 텍스트에 링크된다.

도 6에 도시된 예에서, 뷰 노드 트리(610)의 식별자 "105"는 브라우저 인스턴스(614)에 의해 표현된 DOM 요소의 식별자 "105"에 대한 DOM 프록시에 링크된다. 또한, 식별자 "106"은 식별자 "106"에 대한 DOM 프록시에 링크되고, 식별자 "107"은 식별자 "107"에 대한 DOM 프록시에 링크된다. 이 예에서, 뷰 노드 트리(610)는 자식 노드 "TEXT(Hello)"(도 5)를 브라우저 인스턴스(614) 내의 DOM 요소 "Hello"에 링크하는 식별자 "107"을 포함한다.

도 7은 수정 전후의 문서 노드 트리의 일례를 나타내는 블록도이다. 문서 노드 트리(702)는 수정 전이고, 문서 노드 트리(704)는 수정 후이다. 이 예에서는, 객체 Hello에 대한 변경을 행하여, 706에 지시되는 바와 같은 10pt로부터 708에 지시되는 바와 같은 25pt로 폰트 크기를 변경한다. 수정 전에 마크업 텍스트는 문서 노드 트리(702)를 구성하도록 파싱되었으며, 문서 노드 트리(702)는 브라우저 내에 표현된 DOM을 구성하는 데 사용되었다.

일 실시예에서, 마크업 텍스트에 대해 수정이 행해진다. 이어서, 수정된 마크업 텍스트는 부분적으로 파싱되거나 완전히 파싱된다. 일 실시예에서는, 파싱 동안 트리 차이 알고리즘을 이용하여, 문서 노드 트리에 대한 변경을 결정한다. 도 7에 도시된 예에서는, 파싱 후에, Hello가 Hello로 변경된 문서 노드 트리(704)가 제공된다. 문서 노드 트리에 대한 변경으로부터 도 8에 도시된 바와 같은 변경 레코드(800)가 생성된다.

도 8은 수정에 대한 변경 레코드(800)의 일례를 나타내는 블록도이다. 예시적인 변경 레코드(800)는 도 7과 관련하여 이전에 설명되고 도시된 바와 같은 폰트 크기의 수정에 대한 것이다. 다른 예들에서, 변경 레코드(800)는 다른 적절한 값들, 특성들 및/또는 스타일들을 수정하기 위해 또는 DOM 요소들을 삽입 및/또는 삭제하기 위해 사용될 수 있다. 변경 레코드(800)는 수정이 행해질 노드 "스타일(STYLE)", 수정되고 있는 값 또는 특성 "폰트 크기(font-size)", 지시된 특성에 대한 오래된 값 "10pt" 및 지시된 특성에 대한 새로운 값 "25pt"를 포함한다. 변경 레코드(800)를 이용하여, 문서 노드 트리가 갱신되며, 뷰 노드 트리 및 브라우저에 의해 표현되는 DOM을 갱신하기 위해 변경들이 인스턴스 관리기(도 5)로 전달된다. 따라서, 마크업 텍스트, 문서 노드 트리 및 브라우저에 의해 표현되는 DOM은 마크업 텍스트에 대한 수정 후에 동기화된다.

다른 실시예에서, DOM 요소들에 대한 변경들은 요소 속성들 및/또는 스타일 특성들을 통해 행해진다. 일 실시예에서, 요소 속성들 및/또는 스타일 특성들은 웹 개발 도구의 특성 창 또는 다른 적절한 메커니즘을 통해 수정된다. 특성 창은 전술한 바와 같이 마크업 텍스트에서가 아니라 문서 노드 트리에서 요소 속성들 및/또는 스타일 특성들을 변경하는 데 사용될 수 있다. 이 실시예에서는, 요소 속성 및/또는 스타일 특성에 대한 수정에 응답하여 특성 창에 의해 도 8에 도시된 바와 같은 변경 레코드(800)가 생성된다. 변경 레코드(800)를 이용하여, 문서 노드 트리가 갱신되며, 뷰 노드 트리 및 브라우저에 의해 표현되는 DOM을 갱신하기 위해 변경들이 인스턴스 관리기(도 5)로 전달된다. 게다가, 수정과 관련된 마크업 텍스트는 또한 문서 노드 트리 내의 텍스트 오프셋들에 의해 문서 노드 트리와 마크업 텍스트 사이에 제공되는 맵핑에 기초하여 갱신된다. 이 예에서, 텍스트의 "10pt"의 위치에 있는 마크업 텍스트는 텍스트 "25pt"로 대체된다. 따라서, 마크업 텍스트, 문서 노드 트리, 및 브라우저에 의해 표현되는 DOM은 요소 속성들 및/또는 스타일 특성들에 대한 수정 후에 동기화된다.

다른 실시예에서, DOM 요소들에 대한 변경들이 DOM 모음 변화 이벤트들에 의해 검출된다. DOM 모음 변화 이벤트들에 의해 검출된 DOM 요소들에 대한 변경들은 예를 들어 JS의 실행에 기인할 수 있다. 일 실시예에서는, 사용자 액션 또는 타이머에 기초하여 변경들에 대한 DOM을 표현하는 뷰 노드 트리를 분석함으로써 DOM 요소들에 대한 변경들도 결정된다. 도 8에 도시된 바와 같이, DOM 모음 변환 이벤트에 의해 검출되거나 뷰 노드 트리의 분석에 의해 결정되는 각각의 변경을 이용하여, 변경 레코드(800)를 생성한다. 변경 레코드(800)를 이용하여, 문서 노드 트리 및 마크업 텍스트가 갱신된다. 따라서, 마크업 텍스트, 문서 노드 트리, 및 브라우저에 의해 표현되는 DOM은 DOM에 대한 수정 후에 동기화된다.

도 9는 마크업 텍스트 소스 문서에 대한 수정들에 기초하여 실행 웹페이지를 동적으로 갱신하고, 실행 웹페이지에 대한 수정들에 기초하여 마크업 텍스트 소스 문서를 동적으로 갱신하기 위한 방법(900)의 일 실시예를 나타내는 흐름도이다. 902에서, 소스 코드 편집기에서 마크업 텍스트 소스 문서(예를 들어, 도 3과 관련하여 이전에 설명되고 도시된 마크업 텍스트(302))를 연다. 904에서, 마크업 텍스트 소스 문서에 맵핑된 문서 노드 트리(예를 들어, 도 3과 관련하여 이전에 설명되고 도시된 문서 노드 트리(310))를 구성한다. 906에서, DOM 및 문서 노드 트리에 맵핑된 DOM을 표현하는 뷰 노드 트리(예로서, 도 5와 관련하여 이전에 설명되고 도시된 뷰 노드 트리(508))를 구성한다. 908에서, 브라우저 내에 DOM을 표현한다(예를 들어, 도 1과 관련하여 이전에 설명되고 도시된 실행 표현(104)).

910에서, DOM 요소들에 대한 수정들을 추적하여 제1 변경 정보(예를 들어, 도 8과 관련하여 이전에 설명되고 도시된 바와 같은 변경 레코드(800))를 제공한다. 제1 변경 정보는 DOM 수정 청취기(322)(도 3)에 의해 또는 사용자에 의한 요소 속성들 및/또는 스타일 특성들의 수정을 통해 제공될 수 있다. 912에서, 제1 변경 정보를 마크업 텍스트 소스 문서에 적용하여 마크업 텍스트 소스 문서를 갱신한다. 제1 변경 정보는, 먼저 제1 변경 정보에 기초하여 문서 노드 트리를 갱신하고, 이어서 제1 변경 정보 및 문서 노드 트리 내의 텍스트 오프셋들에 기초하여 마크업 텍스트 소스 문서를 갱신함으로써, 마크업 텍스트 소스 문서에 적용된다.

914에서, 마크업 텍스트 소스 문서에 대한 수정들을 추적하여 제2 변경 정보(예를 들어, 도 8과 관련하여 이전에 설명되고 도시된 바와 같은 변경 레코드(800))를 제공한다. 916에서, 제2 변경 정보를 DOM 요소들에 적용하여 브라우저 내에 표현된 바와 같은 DOM 요소들을 갱신한다. 제2 변경 정보는, 먼저 제2 변경 정보에 기초하여 문서 노드 트리를 갱신하고, 이어서 문서 노드 트리에 기초하여 DOM 및 DOM을 표현하는 뷰 노드 트리를 갱신함으로써, DOM 요소들에 적용된다.

실시예들은 브라우저 내에 표현되는 바와 같은 DOM 요소들과 DOM 요소들을 구성하는 데 사용되는 마크업 텍스트 소스 문서 내의 마크업 텍스트를 링크하기 위한 웹 개발 도구를 제공한다. 마크업 텍스트 소스 문서를 파싱하여 DOM을 요소별로 구성하며, 따라서 오리지널 소스 코드와 구성된 DOM 요소들 사이의 정밀한 맵핑이 유지된다. 개시된 웹 개발 도구를 이용하여, 실행 페이지 내의 DOM 요소들에 대한 수정들에 기초하여 대응하는 소스 코드가 동적으로 갱신될 수 있으며, 소스 코드에 대한 수정들에 기초하여 실행 페이지 내의 대응하는 DOM 요소들이 동적으로 갱신될 수 있다.

본 명세서에서 특정 실시예들이 도시되고 설명되었지만, 당업자들은 본 발명의 범위로부터 벗어나지 않으면서 다양한 대안적인 그리고/또는 균등한 구현들이 도시되고 설명된 특정 실시예들을 대체할 수 있다는 것을 알 것이다. 본원은 본 명세서에서 설명된 특정 실시예들의 임의의 개량들 또는 변경들을 포괄하는 것을 의도한다. 따라서, 본 발명은 청구범위 및 이들의 균등물들에 의해서만 한정되는 것을 의도한다.

Claims

웹 개발 툴 내에서, 복수의 브라우저 중에서 문서 객체 모델(Document Object Model(DOM))의 구성의 기초가 되는 브라우저를 선택하는 단계와,
소스 코드 편집기에서 파싱(parsing)되기 이전에 오리지널 소스 코드를 포함하는 텍스트 소스 문서를 여는 단계와,
문서 노드 트리의 각 노드에 대한 텍스트 오프셋을 포함하는 상기 문서 노드 트리를 구성하도록 상기 텍스트 소스 문서를 파싱하는 단계 - 각 노드에 대한 각각의 텍스트 오프셋은 상기 문서 노드 트리의 노드에 대응하는 상기 텍스트 소스 문서 내의 연관된 오리지널 소스 코드의 위치를 지시함 - 와,
상기 문서 노드 트리로부터, 상기 선택된 브라우저에 기초하여 DOM을 구성하고 상기 DOM을 표현하는 뷰 노드 트리를 구성하는 단계 - 상기 뷰 노드 트리를 구성하는 단계는 상기 뷰 노드 트리를 상기 문서 노드 트리에 맵핑하는 단계를 포함함 - 와,
상기 DOM의 실행 표현을 제공하는 단계와,
제1 변경 정보를 제공하기 위해 상기 DOM에 대한 수정을 추적하는 단계와 제2 변경 정보를 제공하기 위해 상기 텍스트 소스 문서에 대한 수정을 추적하는 단계 중 하나의 단계
를 포함하되,
상기 문서 노드 트리의 각 노드에 대한 상기 텍스트 오프셋은 라인 내의 라인 번호 및 위치를 포함하거나 상기 텍스트 소스 문서의 시작에 대한 문자의 위치를 나타내는 문자 번호를 포함하고,
상기 DOM의 상기 실행 표현 내에서 DOM 요소를 선택하는 것에 의해, 상기 선택된 DOM 요소와 연관된 상기 텍스트 소스 문서의 상기 오리지널 소스 코드가 상기 소스 코드 편집기 내에서 선택되는
방법.
제1항에 있어서,
상기 제1 변경 정보를 상기 텍스트 소스 문서에 적용하여 상기 텍스트 소스 문서를 갱신하는 단계와 상기 제2 변경 정보를 상기 DOM에 적용하여 상기 DOM의 상기 실행 표현을 갱신하는 단계 중 하나
를 더 포함하는 방법.
제1항에 있어서,
상기 DOM에 대한 상기 수정을 추적하는 단계는 DOM 모음 변화(mutation)를 추적하는 단계를 포함하는
방법.
제1항에 있어서,
상기 제1 변경 정보는 편집, 삭제 또는 삽입할 상기 문서 노드 트리의 노드 및 상기 DOM에 대한 상기 수정에 대응하는 데이터를 식별하는
방법.
제1항에 있어서,
상기 제2 변경 정보는 편집, 삭제 또는 삽입할 상기 문서 노드 트리의 노드 및 상기 텍스트 소스 문서에 대한 상기 수정에 대응하는 데이터를 식별하는
방법.
제1항에 있어서,
상기 DOM에 대한 상기 수정을 추적하는 단계는, 특성 패널 및 상기 DOM의 상기 실행 표현의 직접 조작 중 하나를 통해 적용되는 사용자 편집을 추적하는 단계를 포함하는
방법.
제1항에 있어서,
상기 뷰 노드 트리를 상기 문서 노드 트리에 맵핑하는 단계는 상기 뷰 노드 트리의 각각의 노드에 식별자를 할당하는 단계를 포함하고,
상기 뷰 노드 트리의 각각의 식별자는 상기 문서 노드 트리의 대응하는 노드에 맵핑되며,
상기 제1 변경 정보는 상기 DOM의 상기 수정에 대응하는 상기 뷰 노드 트리 내의 상기 노드의 상기 식별자를 포함하는
방법.
제1항에 있어서,
복수의 DOM 수정에 대한 제1 변경 정보를 직렬화하는 단계
를 더 포함하는 방법.
제8항에 있어서,
상기 직렬화된 제1 변경 정보를 상기 텍스트 소스 문서에 적용하여 상기 텍스트 소스 문서를 갱신하는 단계를 더 포함하는
방법.
제1항에 있어서,
상기 DOM에 대한 수정을 추적하는 단계에 있어서, 상기 수정은 실행 스크립트에 의한 것인
방법.
방법을 수행하도록 컴퓨팅 장치를 제어하기 위한 컴퓨터 실행 가능 명령어를 저장하는 컴퓨터 판독 가능 저장 매체로서,
상기 방법은
웹 개발 툴 내에서, 복수의 브라우저 중에서 문서 객체 모델(DOM)의 구성의 기초가 되는 브라우저를 선택하는 단계와,
소스 코드 편집기에서 파싱(parsing)되기 이전에 오리지널 소스 코드를 포함하는 마크업 텍스트 소스 문서를 여는 단계와,
문서 노드 트리의 각 노드가 텍스트 오프셋 및 마크업 텍스트 소스 문서 상세(detail)를 포함하는 상기 문서 노드 트리를 구성하도록 상기 마크업 텍스트 소스 문서를 파싱하는 단계 - 상기 문서 노드 트리의 각 노드의 각각의 텍스트 오프셋은 상기 문서 노드 트리의 노드에 대응하는 상기 마크업 텍스트 소스 문서 내의 연관된 오리지널 소스 코드의 위치를 지시함 - 와,
상기 문서 노드 트리로부터, 상기 선택된 브라우저에 기초하여 DOM을 구성하고 상기 DOM을 표현하는 뷰 노드 트리를 구성하는 단계 - 상기 뷰 노드 트리를 구성하는 단계는 상기 뷰 노드 트리를 상기 문서 노드 트리에 맵핑하는 단계를 포함함 - 와,
각 DOM 요소가 상기 DOM 요소와 연관된 상기 연관된 오리지널 소스 코드에 링크되도록 상기 브라우저 내에 상기 DOM의 실행 표현을 제공하는 단계 - 상기 링크는 상기 문서 노드 트리 내의 상기 텍스트 오프셋 및 상기 뷰 노드 트리를 통해 제공됨 - 와,
제1 변경 정보를 제공하기 위해 DOM 요소에 대한 수정을 추적하는 단계와,
제2 변경 정보를 제공하기 위해 상기 소스 코드 편집기 내의 상기 마크업 텍스트 소스 문서에 대한 수정을 추적하는 단계
를 포함하되,
상기 문서 노드 트리의 각 노드에 대한 상기 텍스트 오프셋은 라인 내의 라인 번호 및 위치를 포함하거나 상기 마크업 텍스트 소스 문서의 시작에 대한 문자의 위치를 나타내는 문자 번호를 포함하고,
상기 브라우저 내의 DOM 요소를 강조(highlight)하는 것에 의해, 상기 강조된 DOM 요소와 연관된 상기 마크업 텍스트 소스 문서의 상기 오리지널 소스 코드가 상기 소스 코드 편집기 내에서 강조되는
컴퓨터 판독 가능 저장 매체.
제11항에 있어서,
상기 방법은, 상기 제2 변경 정보를 상기 DOM 및 상기 DOM을 표현하는 상기 뷰 노드 트리에 적용하여 상기 DOM의 상기 실행 표현을 갱신하는 단계를 더 포함하는
컴퓨터 판독 가능 저장 매체.
제11항에 있어서,
상기 방법은, 상기 제1 변경 정보를 상기 마크업 텍스트 소스 문서에 적용하여 상기 마크업 텍스트 소스 문서를 갱신하는 단계를 더 포함하는
컴퓨터 판독 가능 저장 매체.
제11항에 있어서,
상기 DOM 요소에 대해 수정을 추적하는 단계는 사용자에 의한 DOM 요소의 속성 또는 스타일에 대한 수정을 추적하는 단계를 포함하는
컴퓨터 판독 가능 저장 매체.
제11항에 있어서,
상기 방법은,
상기 제1 변경 정보를 직렬화하는 단계와,
상기 직렬화된 제1 변경 정보를 상기 마크업 텍스트 소스 문서에 적용하여 상기 DOM 요소에 대한 수정에 대응하도록 상기 마크업 텍스트 소스 문서를 갱신하는 단계를 더 포함하는
컴퓨터 판독 가능 저장 매체.
제11항에 있어서,
상기 마크업 텍스트 소스 문서에 대한 수정을 추적하는 단계는, 상기 수정된 마크업 텍스트 소스 문서를 파싱하여 상기 제2 변경 정보를 제공하기 위해 상기 문서 노드 트리에 대한 수정을 식별하는 단계를 포함하는
컴퓨터 판독 가능 저장 매체.
방법을 수행하도록 컴퓨팅 장치를 제어하기 위한 컴퓨터 실행 가능 명령어를 포함하는 개발 툴을 저장하는 컴퓨터 판독 가능 저장 매체로서, 상기 개발 툴은 방법을 수행하도록 구성되고,
상기 방법은
오리지널 소스 코드를 포함하는 마크업 텍스트 소스 문서를 파싱 이전에 편집하기 위한 소스 코드 편집기를 제공하는 단계와,
상기 개발 툴 내에서, 복수의 브라우저 중에서 문서 객체 모델(DOM)의 구성의 기초가 되는 브라우저를 선택하는 단계와,
마크업 텍스트 파서를 통해 상기 마크업 텍스트 소스 문서로부터 문서 노드 트리를 구성하는 단계 - 문서 노드 트리의 각 노드는 텍스트 오프셋 및 소스 문서 상세를 포함하고, 상기 문서 노드 트리의 각 노드의 텍스트 오프셋은 상기 문서 노드 트리의 노드에 대응하는 상기 마크업 텍스트 소스 문서 내의 연관된 오리지널 소스 코드의 위치를 지시함 - 와,
상기 문서 노드 트리로부터, 상기 선택된 브라우저에 기초하여 DOM을 구성하고 상기 DOM을 표현하는 뷰 노드 트리를 구성하는 단계 - 각 DOM 요소가 상기 DOM 요소와 연관된 상기 연관된 오리지널 소스 코드에 링크되도록 상기 뷰 노드 트리는 상기 문서 노드 트리에 맵핑되고, 상기 링크는 상기 문서 노드 트리 내의 상기 텍스트 오프셋 및 상기 뷰 노드 트리를 통해 제공됨 - 와,
제1 변경 정보를 제공하기 위해 상기 브라우저 내의 각 DOM 요소에 대한 수정을 추적하는 단계 - 상기 각 DOM 요소에 대한 수정을 추적하는 단계는 DOM 요소에 대한 각각의 수정과 연관된 문서 노드 트리 또는 뷰 노드 트리의 노드를 식별하는 단계를 포함함 - 와,
상기 제1 변경 정보를 상기 마크업 텍스트 소스 문서에 적용하여 상기 마크업 텍스트 소스 문서를 갱신하는 단계와,
제2 변경 정보를 제공하기 위해 상기 소스 코드 편집기 내의 상기 마크업 텍스트 소스 문서에 대한 수정을 추적하는 단계 - 상기 마크업 텍스트 소스 문서에 대한 수정을 추적하는 단계는 상기 마크업 텍스트 소스 문서에 대한 각각의 수정과 연관된 문서 노드 트리 또는 뷰 노드 트리의 노드를 식별하는 단계를 포함함 - 와,
상기 제2 변경 정보를 상기 DOM 및 상기 DOM을 표현하는 상기 뷰 노드 트리에 적용하여 상기 브라우저 내에서 상기 DOM의 표현을 갱신하는 단계
를 포함하되,
상기 문서 노드 트리의 각 노드에 대한 상기 텍스트 오프셋은 라인 내의 라인 번호 및 위치를 포함하거나 상기 마크업 텍스트 소스 문서의 시작에 대한 문자의 위치를 나타내는 문자 번호를 포함하고,
상기 DOM 요소를 상기 브라우저 내에서 선택하는 것에 의해, 상기 선택된 DOM 요소와 연관된 상기 마크업 텍스트 소스 문서의 상기 오리지널 소스 코드가 상기 소스 코드 편집기 내에서 선택되는
컴퓨터 판독 가능 저장 매체.
제17항에 있어서,
상기 제1 변경 정보를 상기 마크업 텍스트 소스 문서에 적용하여 상기 마크업 텍스트 소스 문서를 갱신하는 단계는,
상기 제1 변경 정보에 기초하여 상기 문서 노드 트리를 갱신하는 단계와,
상기 제1 변경 정보 및 상기 문서 노드 트리의 상기 텍스트 오프셋에 기초하여 상기 마크업 텍스트 소스 문서를 갱신하는 단계
를 포함하는
컴퓨터 판독 가능 저장 매체.
제17항에 있어서,
상기 제2 변경 정보를 상기 DOM 및 상기 DOM을 표현하는 상기 뷰 노드 트리에 적용하여 상기 브라우저 내에서 상기 DOM의 표현을 갱신하는 단계는,
상기 제2 변경 정보에 기초하여 상기 문서 노드 트리를 갱신하는 단계와,
상기 문서 노드 트리에 기초하여 상기 DOM 및 상기 DOM을 표현하는 뷰 노드 트리를 갱신하는 단계
를 포함하는
컴퓨터 판독 가능 저장 매체.
제17항에 있어서,
상기 방법은, DOM 요소에 대한 수정을 추적하기 위해 상기 DOM에 이벤트 청취기를 삽입하는 단계를 더 포함하는
컴퓨터 판독 가능 저장 매체.
제1항에 있어서,
상기 소스 코드 편집기 내에서 상기 텍스트 소스 문서를 편집하는 단계와,
상기 편집된 텍스트 소스 문서를 저장하는 단계
를 더 포함하는
방법.