KR101908162B1 - 통합 개발 환경에서의 라이브 브라우저 툴 제공 기법 - Google Patents

통합 개발 환경에서의 라이브 브라우저 툴 제공 기법 Download PDF

Info

Publication number
KR101908162B1
KR101908162B1 KR1020137033204A KR20137033204A KR101908162B1 KR 101908162 B1 KR101908162 B1 KR 101908162B1 KR 1020137033204 A KR1020137033204 A KR 1020137033204A KR 20137033204 A KR20137033204 A KR 20137033204A KR 101908162 B1 KR101908162 B1 KR 101908162B1
Authority
KR
South Korea
Prior art keywords
file
browser
dom
selection
location range
Prior art date
Application number
KR1020137033204A
Other languages
English (en)
Other versions
KR20140038459A (ko
Inventor
다니엘 피 차티어
조셉 엠 데이비스
곤잘레즈 조지 이 가부아디
비샬 알 조쉬
마이클 제이 하더
마이클 바흐
앤 시-푸옹 판
레쉬미 망갈로어
존 이 정
Original Assignee
마이크로소프트 테크놀로지 라이센싱, 엘엘씨
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 마이크로소프트 테크놀로지 라이센싱, 엘엘씨 filed Critical 마이크로소프트 테크놀로지 라이센싱, 엘엘씨
Publication of KR20140038459A publication Critical patent/KR20140038459A/ko
Application granted granted Critical
Publication of KR101908162B1 publication Critical patent/KR101908162B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/33—Intelligent editors
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F17/00—Digital computing or data processing equipment or methods, specially adapted for specific functions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F15/00—Digital computers in general; Data processing equipment in general
    • G06F15/16—Combinations of two or more digital computers each having at least an arithmetic unit, a program unit and a register, e.g. for a simultaneous processing of several programs
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/75—Structural analysis for program understanding
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/35—Creation or generation of source code model driven
    • G06F8/355—Round-trip engineering
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Hardware Design (AREA)
  • Mathematical Physics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • Document Processing Apparatus (AREA)

Abstract

브라우저에서의 선택이 선택을 생성한 하나 이상의 소스 파일 내의 대응하는 위치 범위에 역맵핑될 수 있다. 소스 파일에서의 선택이 브라우저의 DOM 내의 대응하는 위치 범위에 맵핑될 수 있다. 브라우저에서의 선택은 DOM으로부터 생성된 블록 리스트 내의 위치 범위에 맵핑될 수 있다. DOM의 블록 리스트 내의 위치 범위는 웹 서버로부터 수신된 인출된 파일로부터 생성된 블록 리스트 내의 대응하는 위치 범위에 맵핑될 수 있다. 인출된 파일의 블록 리스트 내의 위치 범위는 브라우저에서의 선택의 생성을 책임지는 특정 소스 파일 내의 특정 위치에 맵핑될 수 있다. 브라우저에서의 선택 및 소스 파일이 동시에 표시될 수 있으며, 소스 파일은 브라우저에서의 선택에 대응하는 위치 범위로 스크롤된다.

Description

통합 개발 환경에서의 라이브 브라우저 툴 제공 기법{LIVE BROWSER TOOLING IN AN INTEGRATED DEVELOPMENT ENVIRONMENT}
월드 와이드 웹은 현대 생활의 보편적인 부분이 되었다. 이에 따라, 웹 개발은 급성장하고 있는 산업이다. 웹 개발은 전통적인 소프트웨어 개발과는 여러 중요한 방식에서 상이하다.
복잡한 웹 사이트는 여러 개의 상이한 페이지로 구성될 수 있으며, 이러한 페이지들의 콘텐츠는 많은 상이한 파일들로부터 생성될 수 있다. 웹 서버에 의해 처리되고 브라우저 내에 표시될 때 관찰자가 보는 페이지가 되는 파일들 내의 코드를 작성하는 웹 개발자에 의해서 콘텐츠는 파일들 내에서 수많은 방식으로 분할될 수 있다. 웹 서버는 파일들을 처리할 때 도중에 추가적인 콘텐츠를 자주 생성한다. 웹 서버에 의해 처리되는 몇몇 코드 라인은 최종 웹페이지 내의 수백 개의 코드 라인의 생성을 담당할 수 있다. 클라이언트가 웹 서버에 대해 요청을 할 때, 웹 서버는 어떤 파일들이 응답을 구성할지를 결정하고, 이들을 단일 파일로 조립하며, 응답을 클라이언트로 반환한다. 브라우저가 웹 서버로부터 브라우저 내로 수신된 문서들을 로딩한 후, 웹페이지에 상호작용 특징들을 추가하는 스크립팅 언어가 문서 내에 콘텐츠를 추가, 삭제 또는 변경할 수 있다.
웹 처리가 동작하는 방식은 웹 개발에 영향을 미친다. 웹 개발자가 웹사이트의 일부를 변경하기를 원할 때, 웹 개발자는 웹사이트와 관련된 웹 서버의 파일들 중 어느 파일이 변경되어야 하는 파일인지를 알아야 한다. 더구나, 현재는 웹 서버에 의해 코드가 처리되고 클라이언트가 응답을 수신할 때까지 서버 생성 콘텐츠가 무엇인지를 알 방법이 없으며, 따라서 웹 개발자는 그가 만든 변경이 일으킬 효과를 추측할 수 있을 뿐이다. 스크립팅 언어들은 자주 HTML 파일들 상에서 작동하여, 애플리케이션과 같은 기능을 정적 HTML 문서에 추가한다. 스크립팅 언어가 실행된 후에, 브라우저에 의해 제공되는 문서는 서버로부터 온 오리지널 파일과 달라진다. 브라우저에서 선택된 요소를 웹 서버로부터 수신된 파일에 역맵핑하기 위한 자동화된 방법이 현재 존재하지 않는다.
브라우저에서의 선택을 인출된 파일 내의 위치 범위에 맵핑하고 인출된(fetched) 파일 내의 위치 범위를 소스 파일 내의 위치 범위에 맵핑함으로써 브라우저에서의 선택이 그를 생성한 소스 코드 파일 내의 위치 범위에 맵핑될 수 있다. 소스 파일 내의 위치 범위를 인출된 파일 내의 위치 범위에 맵핑하고 인출된 파일 내의 위치 범위를 브라우저에서의 선택에 맵핑함으로써 소스 파일 내의 위치 범위가 브라우저에서의 선택에 맵핑될 수 있다.
브라우저 파일과 웹 서버로부터 인출된 오리지널 문서 사이의 연관성을 생성하고, 브라우저 선택을 브라우저 파일에 맵핑하고, 브라우저 파일과 인출된 오리지널 파일 사이의 연관성을 이용하여 브라우저에서의 선택을 웹 서버로부터 인출된 오리지널 문서에 맵핑함으로써 브라우저에서의 선택이 인출된 파일 내의 위치 범위에 맵핑될 수 있다.
인출된 파일의 생성 동안 메타데이터를 수집함으로써 인출된 파일 내의 위치 범위가 인출된 파일을 생성한 소스 파일 내의 위치 범위에 맵핑될 수 있다. 메타데이터는 인출된 파일 내의 위치 범위들을 소스 파일 내의 위치 범위들에 맵핑하는 데 사용될 수 있는 맵핑 테이블을 생성하는 데 사용될 수 있다. 이 맵핑 테이블은 또한 소스 파일 내의 위치 범위들을 인출된 파일 내의 위치 범위들에 맵핑하는 데 사용될 수 있다. 브라우저 파일과 인출된 오리지널 파일 사이의 연관성은 인출된 파일 내의 위치 범위들을 브라우저에서의 선택에 맵핑하는 데 사용될 수 있다. 이러한 작업들을 수행하는 모듈들은 IDE(integrated development environment(통합 개발 환경)) 내에 통합될 수 있다.
HTTP 요청에 응답하여 웹 서버 상에서 HTML 코드가 생성될 때, 코드는 메타데이터: HTML 코드의 조각들을 특정 소스 파일 내의 특정 위치에 역맵핑하는 정보를 이용하여 증대될 수 있다. 사용자가 브라우징할 수 있는 웹페이지를 표현하는 파일을 생성하는 코드가 웹 서버 상에서 실행됨에 따라, 맵핑 정보는 생성된 파일 내에 삽입될 수 있거나, 다른 메커니즘을 통해 클라이언트측 브라우저로 전송될 수 있다. 클라이언트측 맵핑 모듈들은 웹 서버로부터 파일을 수신하고, 메타데이터를 기록하고, 메타데이터를 이용하여, 인출된 파일로부터의 위치 범위들을 콘텐츠를 생성한 소스 파일들 내의 대응하는 위치 범위들에 맵핑하는 맵핑 테이블을 생성할 수 있다. 클라이언트측 모듈들은 개발 기능과 통합되고 IDE 내에서 실행되는 브라우징 경험을 제공할 수 있다. 개발자에게 렌더링 및 표시되는 것이 웹 서버 거동의 시뮬레이션된 해석이 아니라 웹 서버 응답의 생산이 되도록 웹 서버에 대한 충분한 왕복을 행함으로써 콘텐츠가 개발중인 페이지 내에 렌더링될 수 있다.
문서 객체 모델(DOM(document object model)) 도구는 브라우저 페이지를 표현하는 트리 데이터 구조의 가시화를 제공할 수 있다. 캐스케이드 스타일 시트(CSS(cascade style sheet)) 도구는 선택된 스타일 특성을 그의 소스 코드 파일에 역맵핑하여, 대응하는 소스 파일에서 규칙 또는 속성을 선택하고 그 규칙 또는 속성을 변경함으로써 HTML 요소의 스타일 특성에 대한 고려된 변경이 자동으로 영속화 할 수 있다. 개발자는 또한 소스 파일에 변경을 적용하지 않고도 브라우저에서 고려된 스타일 변경을 볼 수 있다.
서버측 맵핑 모듈들은 웹 프레임워크와 통합될 수 있으며, 따라서 웹 프레임워크는 클라이언트 상의 브라우저로부터의 HTTP 요청에 응답하여 서버로부터 클라이언트로 전송되는 맵핑 정보를 수집할 수 있다.
본 요약은 이하의 상세한 설명에서 더 후술하는 개념들의 발췌를 간단한 형태로 소개하기 위해 제공된다. 본 요약은 청구 발명의 중요한 특징들 또는 본질적인 특징들을 식별하는 것을 의도하지 않으며, 청구 발명의 범위를 한정하는 데 사용되는 것도 의도하지 않는다.
도 1은 본 명세서에서 개시되는 발명의 양태들에 따른 IDE에서의 라이브 브라우저 도구화를 제공하는 시스템(100)의 일례를 도시한다.
도 2a는 본 명세서에서 개시되는 발명의 양태들에 따른 인출된 파일과 소스 코드 파일 사이의 맵핑을 위한 방법(200)의 일례를 도시한다.
도 2b는 본 명세서에서 개시되는 발명의 양태들에 따른 브라우저와 인출된 파일들 사이의 맵핑을 위한 방법(203)의 일례를 도시한다.
도 2c는 본 명세서에서 개시되는 발명의 양태들에 따른 DOM 내의 위치 범위들과 인출된 파일 내의 위치 범위들 사이의 연관성을 생성하는 방법(290)의 일례를 도시한다.
도 2d는 본 명세서에서 개시되는 발명의 양태들에 따른 인출된 파일에 대한 블록 리스트 및 DOM에 대한 블록 리스트의 일례(230)를 도시한다.
도 2e는 브라우저에서의 선택으로부터 DOM 블록 리스트로의, 이어서 인출된 파일로의 맵핑의 일례(270)를 도시한다.
도 2f는 본 명세서에서 개시되는 발명의 양태들에 따른, IDE에서의 라이브 브라우징 도구화를 제공하기 위한 방법(240)의 일례를 도시한다.
도 3은 본 명세서에서 개시되는 발명의 양태들에 따른 컴퓨팅 환경의 일례의 블록도이다.
도 4는 본 명세서에서 개시되는 발명의 양태들에 따른 통합 개발 환경의 일례의 블록도이다.
개요
웹 개발에서(그리고 특히 마이크로소프트의 ASP.NET와 같은 프레임워크들에서), 사용자가 웹 상에서 브라우징할 수 있는 페이지를 형성하기 위해 많은 상이한 소스 파일들이 결합될 수 있다. 예를 들어, 웹사이트는 웹사이트 상의 메뉴 바 내에 목록화된 다수의 페이지, 예를 들어 "Home", "About", "Contact us" 등을 가질 수 있다. 메뉴 바를 위한 코드가 하나의 소스 파일 내에 존재할 수 있고, "About" 페이지가 다른 소스 파일 내에 존재할 수 있고, 기타 등등일 수 있다. 사용자가 웹사이트를 브라우징할 때, 모든 소스 파일들은 예를 들어 "About.htm"이라고 하는 파일 또는 "Contact.htm"이라고 하는 파일과 같은 단일 파일로서 사용자의 브라우저로 복귀할 수 있다.
웹사이트 상에서 무언가를 변경하기를 원하는 개발자는 그가 변경하기를 원하는 요소가 어느 파일 내에 위치하는지를 알아야 한다. 종종, 변경할 파일을 찾는 것은 간단하지 않은 작업이 될 수 있는데, 그 이유는 예를 들어 웹 개발자가 웹사이트의 콘텐츠를 분할하기 위해 선택할 수 있는 많은 상이한 방법들이 존재하고, 정보가 소스 내로 코딩되는 것이 아니라 데이터베이스들로부터 추출될 수 있기 때문이다. 따라서, 개발자는 "파일 찾기" 명령들을 수동으로 실행하거나, 코드를 철저히 조사하거나, 요소가 발견될 수 있는 곳에 대한 기억에 의존해야 할 수 있다.
본 명세서에서 개시되는 발명의 양태들에 따르면, 브라우저에서 선택된 임의의 요소, 특성 또는 위치 범위가 그를 생성한 소스 코드에 맵핑될 수 있으며, 소스 코드에서 선택된 임의의 위치 범위가 브라우저에서 소스 코드가 생성하는 것에 맵핑될 수 있다. (예를 들어, 어셈블리, 이진수, 실행 파일 등으로) 컴파일되는 개발자 소스 코드는 실행시에 코드의 조각을 특정 소스 파일에 그리고 소스 파일 내의 특정 위치에 역맵핑하는 메타데이터를 방출하는 호출들과 함께 컴파일 동안에 또는 나중에 계측될 수 있다. 계측된 호출들은 해석시에 코드의 조각을 특정 소스 파일에 그리고 소스 파일 내의 특정 위치에 역맵핑하는 메타데이터를 방출하는 해석된 소스 코드 파일들 내에 삽입될 수 있다. 메타데이터는 HTML 내의 특정 시작 위치로부터 특정 종료 위치까지의 정보가 소스 파일 내의 특정 시작 위치로부터 특정 종료 위치까지 오도록 지정하는 삽입된 심벌들을 포함할 수 있다.
소스 파일들은 개발자 기계 상에서 함께 컴파일되고 서버에 업로딩되어, 사용자가 웹사이트를 내비게이션할 때 실행되는 코드를 형성할 수 있다. 웹사이트의 페이지가 브라우징될 때, 파일이 서버에 의해 생성되고, 사용자의 컴퓨터 상의 브라우저에 의해 인출된다. 사용자가 서버를 내비게이션할 때, 서버는 실행 가능 코드 내의 메소드들을 실행할 수 있다. 실행 가능 코드는, 서버 코드가 브라우저가 획득할 HTML 파일을 생성할 때, HTML 파일의 각각의 조각이 소스 코드 내의 어느 곳으로부터 왔는지를 나타내는 메타데이터가 수집될 수 있는 방식으로 계측될 수 있다. 메타데이터는 HTML 파일 내에 포함될 수 있거나 개별적으로 전송될 수 있다. 따라서, 브라우저에 의해 인출되는 파일은 브라우저가 사용자에게 표시할 필요가 없는 메타데이터를 포함할 수 있다. 따라서, 브라우저가 HTML 파일을 획득할 때, 메타데이터는 브라우저가 웹사이트 콘텐츠를 표시하는 데 사용하는 파일로부터 제거될 수 있다. 메타데이터는 메모리 내에 데이터 구조로 유지될 수 있다. 데이터 구조는 브라우저 내에서의 선택들을 소스 파일들에 역맵핑하는 데 사용될 수 있으며, 소스 파일들에서의 선택들을 인출된 파일에 맵핑하는 데 사용될 수 있다.
브라우저 선택들을 서버로부터 인출된 HTML 파일에 역맵핑하는 것은 더 어렵게 되는데, 그 이유는 Javascript, 마이크로소프트의 JScript(등록상표), Actionscript, Apple script, VBscript 등과 같은 스크립팅 언어들이 브라우저에서 실행될 수 있기 때문이다. 스크립팅 언어들은 서버로부터 인출된 HTML을 변경할 수 있다. HTML은 텍스트, 리스트, 테이블 및 하이퍼링크를 포함하는 정적 문서들을 생성한다. 스크립팅 언어들은 HTML 요소들을 추가, 삭제, 변경 및 이동시킴으로써 HTML을 프레젠테이션 언어로서 이용하여 애플리케이션과 같은 경험을 제공할 수 있다. 스크립팅 언어는 브라우저에서 관찰되는 문서를 표현하는 데이터 구조를 변경함으로써 이를 행한다. 본 명세서에서 개시되는 본 발명의 양태들에 따르면, 서버로부터 수신된 오리지널 파일의 사본이 유지될 수 있다. 오리지널 파일 내의 단어들 및 요소들은 식별자들을 할당 받을 수 있다. 스크립팅 언어가 실행될 때, 기본 HTML에 대한 변경들이 웹 서버로부터 수신된 오리지널 HTML과 비교될 수 있다. HTML 파일에 대한 블록 리스트 및 DOM에 대한 블록 리스트가 생성될 수 있고, 동일한 블록들은 동일한 식별자들을 가지며, 따라서 데이터 구조 내의 요소가 스크립팅 언어의 실행의 결과로서 이동하는 경우에 요소는 웹 서버로부터 수신된 오리지널 HTML에 여전히 맵핑될 수 있다. 스크립팅 언어가 문서를 변경할 때, 브라우저에서의 사용자 선택들이 인출된 오리지널 파일에 맵핑되는 것을 가능하게 하기 위해 차별화 알고리즘이 실행될 수 있다.
본 명세서에서 설명되는 특징들의 조합은 브라우저에서의 선택들이 소스 코드 내의 대응하는 위치들에 맵핑되는 것을 가능하게 한다. 소스 코드 선택은 그러한 소스 코드 선택이 결국 브라우저에서 생성하는 것에 역맵핑될 수 있다. 즉, 브라우저에서의 선택들의, 개발자의 기계 상의 소스 파일들로의 맵핑과 그 역 맵핑의 조합은 개발자가 요소를 선택하는 사용자 액션을 이용하여 웹페이지 내의 요소를 위해 소스 코드 파일에 액세스하기 위한 능력을 제공한다. 예를 들어, 개발자가 웹사이트 상의 연락처 페이지에서 전화 번호를 변경하기를 원하는 것을 가정한다. 개발자는 IDE를 열고, 클라이언트 컴퓨터 상의 클라이언트측 브라우저 내의 뷰 명령을 사용하여 브라우저를 호출하고, 브라우저를 열고, 연락처 페이지를 내비게이션하고, DOM(문서 객체 모델) 검사기 도구를 이용하여 연락처 페이지에서 전화 번호를 선택할 수 있다. 연락처 페이지에 대한 소스 파일이 브라우저 표시에 인접하게 표시될 수 있으며, 따라서 브라우저 페이지를 생성하는 HTML 코드는 브라우저에서 웹페이지와 동시에 관찰될 수 있다. 소스 코드의 뷰는 브라우저에서의 선택에 대응하는 소스 파일 내의 위치로 스크롤될 수 있다. 예를 들어, 클라이언트측 모듈들은 사용자를 연락처 페이지로 그리고 전화 번호가 하드코딩되어 있거나 파일 또는 데이터베이스에서 전화 번호에 액세스하는 명령이 발견되는 연락처 파일 내의 정확한 위치로 안내할 수 있다. 소스 파일에서의 선택을 인출된 파일로부터 생성된 블록 리스트 내의 위치 범위에 맵핑함으로써 소스 파일에서의 선택이 브라우저 내의 위치 범위에 맵핑될 수 있다. 인출된 파일 내의 위치 범위는 소스 파일에서의 선택의 생성을 책임지는 동적 브라우저 파일(예로서, DOM)로부터 생성된 블록 리스트 내의 위치 범위에 맵핑될 수 있다.
소스 파일 내의 전화 번호를 변경하는 사용자 입력의 수신에 응답하여, 파일이 저장되고, 사이트가 재구성되고, 코드가 서버에 업로드될 수 있다. 더욱이, 클라이언트측 맵핑 모듈들은 브라우저 상의 페이지가 소스 코드와 매칭되는지 또는 매칭되지 않는지를 개발자에게 알릴 수 있다. (이와 달리, 공지된 브라우저들은 브라우저가 파일의 최신 버전을 실행하고 있는지의 여부를 알지 못한다.) 스크린 상에 표시된 옵션을 선택함으로써, 표시된 웹페이지에 대응하는 소스 파일이 검색될 수 있고, 소스 파일의 최신 버전이 표시될 수 있다.
클라이언트측 맵핑 모듈들은 HTML으로부터 요소들을 생성하고 HTML 페이지의 요소들의 그래픽 표현을 표시할 수 있는 DOM(문서 객체 모델) 트리 가시화 도구를 포함할 수 있다. 웹페이지들의 다른 양태는 페이지가 표시되는 방식이다. 페이지가 표시되는 방식은 그의 스타일로서 지칭되며, 페이지에서 사용되는 컬러, 크기, 레이아웃, 폰트 등을 포함한다. 페이지의 스타일은 캐스케이딩 스타일 시트들(CSS)에 의해 결정된다. 스타일들은 문서 내의 어딘가, 요소 바로 다음, 개별 CSS 파일 내부 등을 포함하지만 이에 한정되지 않는 다수의 장소에서 정의될 수 있다. 본 명세서에서 설명되는 본 발명의 양태들에 따르면, 브라우저와 관련된 CSS 도구가 페이지 내의 특정 요소에 대한 스타일링을 분석할 수 있다.
특정 태그(HTML 요소)에 대해, CSS 도구는 그 요소에 적용되는 모든 스타일들을 격자 형태로 표시할 수 있다. CSS 도구는 표시되는 도구 창 내에, 예를 들어 브라우저 표시 아래에 컬러, 크기, 마진, 폰트 크기, 패딩, 볼드, 이태릭 등을 포함하는 스타일링의 양태들을 표시할 수 있다. 스타일링 값들에서 변경이 행해질 때, 라이브 DOM 파일을 변경함으로써 변경들이 즉시 브라우저에서 반영될 수 있다. 더욱이, 스타일들은 CSS 도구에 의해 표시된 격자로부터 해당 요소에 대한 스타일을 정의하는 소스 파일로 맵핑될 수 있다. 예를 들어, 특정 소스 파일 내의 특정 요소에 대해 컬러가 정의되면, 클라이언트측 맵핑 모듈들은 요소에 대한 컬러가 정의된 소스 파일의 식별자를 결정할 수 있다. 문서 내의 또는 특정 스타일이 정의된 파일 내의 정확한 위치가 제공될 수 있다. 변경될 특성을 정의하는 요소의 속성을 선택함으로써 또는 변경될 특성을 정의하는 규칙을 선택함으로써, 클라이언트측 맵핑 모듈들은 개발자가 소스 파일을 변경함으로써 변경을 행할 수 있는 소스 파일 내의 위치를 결정하고 표시할 수 있다. CSS 규칙 맵핑은 인출된 오리지널 파일에서 각각의 CSS 규칙에 대한 고유 식별자를 생성하고, 고유 식별자들을 이용하여 DOM 규칙을 그의 오리지널 소스에 역맵핑함으로써 달성될 수 있다. 프로젝트 시스템을 이용하여, 런타임 URL을 개발자 기계 상의 오리지널 프로젝트 경로와 연관시킬 수 있다.
특정 페이지를 표시하기 위해 브라우저에 의해 사용되는 라이브 DOM 파일들로부터 소스 파일들로의 선택 맵핑은 입력을 서버로 전송하고, 서버로부터 출력을 수신할 수 있다(이는 본 명세서에서 서버를 통한 왕복이라고 한다). 서버 상에서 상당한 양의 처리가 발생할 수 있으므로, 개발자의 변경들의 결과가 무엇일지를 결정하는 것은 어려울 수 있다. 예를 들어, HTML 코드는 아이템을 배열(order) 내에 정의할 수 있지만, 서버에서 배열이 처리될 때까지는 아무도 결과적인 페이지가 어떻게 표시될지, 예를 들어 얼마나 많은 아이템이 배열되는지 등을 알 수 없는데, 그 이유는 이것이 서버 처리에 의존하기 때문이다. 이전의 개발 소프트웨어는 서버가 그의 서버측 처리를 수행한 후에 브라우저에 파일이 어떻게 표시될지를 개발 컴퓨터 상에서 시뮬레이션하려고 시도하는 설계 뷰들을 제공하였다.
통상적으로 개발 컴퓨터는 라이브 서버 상의 정보에 대한 액세스가 부족하고, 서버측 처리를 수행하지 않으므로, 개발 시뮬레이션은 종종 서버 상에서 처리가 발생할 때 페이지의 외관과 별로 비슷하지 않다. 본 명세서에서 개시되는 본 발명의 양태들에 따르면, 웹 서버로부터 데이터가 요청된다. 개발 파일들이 웹 서버로 전송되고, 웹 서버가 파일들을 처리하며, 결과들을 개발 기계에 반환한다. HTTP 요청이 수행될 수 있으며, 따라서 개발 기계는 실제 고객 경험에 가까운 결과를 표시할 수 있다. 즉, IDE에서 브라우저 내에 현재 페이지의 콘텐츠를 렌더링하는 대신에, 서버에 대한 충분한 왕복이 이루어지며, 따라서 개발자에게 렌더링되는 것은 서버가 웹페이지를 보는 사용자에게 제공할 것과 동일하다.
선택 맵핑을 달성하기 위해, 웹 서버 컴퓨터 상에서 생성된 메타데이터에 기초하는 맵핑 테이블이 생성될 수 있다. 맵핑 테이블은 브라우저로부터 소스 파일로의 HTTP 요청에 응답하여 웹 서버로부터 클라이언트에 의해 수신된 파일(즉, 인출된 파일)의 부분들을 맵핑할 수 있다. 파일의 각각의 부분은 메타데이터에 기초하는 식별자를 파일의 각각의 섹션에 할당함으로써 식별될 수 있다. 파일의 식별된 부분을 선택하는 선택 이벤트의 검출에 응답하여, 파일의 선택된 부분이 인출된 문서에 그리고 소스 파일들에 역맵핑될 수 있으며, 따라서 사용자로 하여금 서버에 대한 왕복을 통해 페이지의 콘텐츠를 획득하고, 라이브 브라우저의 콘텐츠를 소스 파일들에 역맵핑하는 것을 가능하게 할 수 있다.
IDE 에서의 라이브 브라우저 도구화
도 1은 본 명세서에서 개시되는 발명의 양태들에 따른, IDE에서의 라이브 브라우저 도구화를 제공하는 시스템(100)의 일례를 도시한다. 시스템(100)의 전부 또는 부분들은 도 3과 관련하여 후술하는 컴퓨터들과 같은 하나 이상의 컴퓨터 상에 존재할 수 있다. 시스템(100)은 도 4와 관련하여 설명되는 소프트웨어 개발 컴퓨터와 같은 소프트웨어 개발 컴퓨터 상에서 전체적으로 또는 부분적으로 실행될 수 있다. 시스템(100)의 전부 또는 부분들은 IDE(104)와 같은 IDE 내에서 실행될 수 있다. IDE(104)는 도 4와 관련하여 설명되는 것과 같은 IDE일 수 있거나, 임의의 다른 IDE일 수 있다. 시스템(100)의 전부 또는 부분들은 IDE 밖에서 실행될 수 있다. 시스템(100)의 전부 또는 부분들은 플러그 인 또는 애드 온으로서 구현될 수 있다.
시스템(100)은 프로세서(142) 등과 같은 하나 이상의 프로세서, 메모리(144)와 같은 메모리, 및 서버 모듈(108)과 같은 IDE에서 서버측 처리 지원 라이브 브라우저 도구화를 제공하기 위한 하나 이상의 서버측 모듈 등을 포함하는 컴퓨터(102)와 같은 하나 이상의 컴퓨터 또는 컴퓨팅 장치를 포함할 수 있다. 시스템(100)은 프로세서(143) 등과 같은 하나 이상의 프로세서, 메모리(145)와 같은 메모리, 및 클라이언트 모듈들(116)과 같은 IDE에서 라이브 브라우저 도구화를 제공하기 위한 하나 이상의 클라이언트측 모듈을 포함하는 컴퓨터(103)와 같은 하나 이상의 컴퓨터 또는 컴퓨팅 장치도 포함할 수 있다. 이 분야에 공지된 다른 컴포넌트들도 포함될 수 있지만, 여기서는 도시되지 않는다. 서버 모듈(108) 등과 같은 하나 이상의 서버 모듈이 메모리(144) 내에 로딩되어, 프로세서(142)와 같은 하나 이상의 프로세서로 하여금 하나 이상의 서버측 모듈에 기인하는 액션들을 수행하게 할 수 있다는 것을 알 것이다. 클라이언트 모듈들(116) 중 하나 이상과 같은 하나 이상의 클라이언트측 모듈이 메모리(145) 내에 로딩되어, 프로세서(143)와 같은 하나 이상의 프로세서로 하여금 하나 이상의 클라이언트측 모듈에 기인하는 액션들을 수행하게 할 수 있다는 것을 알 것이다.
컴퓨터(102)는 HTTP 프로토콜을 이용하여 웹페이지들 및 다른 문서들을 브라우저들에 전달하는 웹 서버 컴퓨터를 나타낼 수 있다. 컴퓨터(102)는 웹 프레임워크(104)와 같은 하나 이상의 웹 프레임워크를 포함할 수 있다. 웹 프레임워크(104)는 ASP.NET, PHP, PERL, Ruby 등과 같은, 그러나 이에 한정되지 않는 웹 프레임워크일 수 있다. 본 명세서에서 개시되는 본 발명의 양태들에 따른 라이브 브라우저 도구화를 제공하는 시스템의 서버 부분은 도 1에서 서버 모듈(108) 등에 의해 표현된다. 서버 모듈(108) 등은 웹 프레임워크에 대한 플러그-인 또는 애드-인일 수 있다. 소스 코드(132) 및/또는 컴파일된 코드(134)는 서버 모듈(108) 등에 의해 수신될 수 있으며, 브라우저(118)와 같은 브라우저로부터의 HTTP 요청에 응답하여 서버 컴퓨터(102)로부터 클라이언트 컴퓨터(103)로 전송되는 HTML 파일을 생성하는 데 사용될 수 있다.
서버 모듈(108)은 클라이언트 컴퓨터(103)와 같은 클라이언트 컴퓨터로 전송될 HTML 파일("인출된 파일")을 생성할 수 있다. 서버 모듈(108)은 HTML 파일의 섹션들이 생성되는 소스 파일들에 관한 정보를 방출할 수 있다. 소스 파일들에 관한 정보는 클라이언트 컴퓨터로 반환될 수 있다. 예를 들어, 정보를 클라이언트로 전송되는 HTML 파일 내에 내장하는 것에 의해 정보가 반환될 수 있거나, 정보가 개별 파일 내에서 전송될 수 있다. 클라이언트 컴퓨터로 전송되는 HTML 파일 내에 포함되는 메타데이터가 개별적으로 전송되는지 또는 전혀 전송되지 않는지는 웹사이트 구성 설정들, HTTP 헤딩 정보, 쿼리 스트링 정보, 폼 데이터 등에 의해 제어될 수 있다.
서버 모듈(108)은 주석 달린 HTML 파일 내의 위치들과 소스 코드 파일들 내의 소스 코드의 섹션들을 연관시키는 메타데이터를 생성할 수 있다. 예를 들어, XML 테이블을 이용하여 소스 및 목적지 위치들 양자를 저장할 수 있다. 대안으로서, 토큰들을 이용하여, HTML 파일 내의 위치 범위들과 소스 코드 파일들의 섹션들 등을 연관시키거나 할 수 있다. 본 명세서에서 개시되는 본 발명의 일부 양태들에 따르면, 서버 모듈(108)은 특정 소스 파일 내의 특정 위치로부터 오는 서버 컴퓨터(102)에 의해 생성된 HTML 파일 내의 위치들의 범위를 함께 정의하는 시작 및 종료 토큰들을 생성할 수 있다. 토큰들의 포맷은 임의의 적절한 포맷일 수 있다는 것을 알 것이다. 예를 들어, 하나의 포맷은 ＄startToken＄ 및 ＄endToken＄일 수 있다. ＄startToken＄는 HTML 파일 내의 시작 위치를 한정하는 데 사용될 수 있으며, ＄endToken＄는 고려중인 HTML 코드의 섹션에 대한 HTML 파일 내의 종료 위치를 한정하는 데 사용될 수 있다. 각각의 시작 토큰/종료 토큰 쌍은 시작 및 종료 토큰들의 하나의 쌍과 시작 및 종료 토큰들의 다른 쌍을 구별하기 위해 순차적인 번호 또는 다른 식별자를 할당받을 수 있다.
서버가 요청된 파일의 생성을 수행한 후, 상황 데이터가 생성될 수 있다. 임의의 데이터 구조를 이용하여 상황 정보를 노출시킬 수 있다. 상황 데이터를 노출시키는 한 가지 방법은, 맵핑 테이블로서 사용될 수 있고, HTML 파일 내의 섹션들과 소스의 섹션들을 연관시키는 데 필요한 데이터를 포함하는 XML 포맷 데이터 구조이다. 예컨대, 시작 및 종료 토큰들에 의해 한정되는 HTML 파일 내의 위치들의 범위에 대응하는 소스 파일 내의 범위들의 테이블이 포함될 수 있다. 본 명세서에서 개시되는 본 발명의 일부 양태들에 따르면, 상황 정보는 클라이언트 컴퓨터로 전송되는 HTML 파일의 끝에 포함될 수 있다. 시작 및 종료 토큰들의 각각의 쌍은 식별자들을 매칭시킴으로써 HTML 파일 내의 위치들과 HTML 조각이 생성된 특정 소스 파일 내의 위치들 사이의 맵핑을 가능하게 하기 위해 시작 및 종료 토큰들의 특정 쌍을 식별하는 식별자(예를 들어, 그러한 시작 및 종료 토큰들의 쌍에 고유한 식별자)에 의해 식별될 수 있다.
예를 들어, 위치 0에서 시작하는 소스 파일 내의 10-문자 범위에 맵핑되는, 위치 50에서 시작하는 인출된 파일 내의 10-문자 범위에 대해, 10-문자 범위 내에 속하는 인출된 파일 내의 선택된 위치 58이 다음과 같이 소스 파일에 맵핑될 수 있는데, 즉 인출된 범위의 시작 위치를 선택된 위치로부터 뺄 수 있고, 그 결과를 소스 파일 내의 범위의 시작 위치에 더할 수 있다. 이 예에서, 58-50+0=8이며, 여기서 8은 소스 파일 내의 선택된 위치이다. 동일한 연산을 인출된 파일 내의 선택된 범위의 시작 및 종료 위치들에 대해 수행하여, 소스 파일 내의 대응하는 범위의 시작과 끝을 찾을 수 있다. 하나의 소스 위치 범위가 서버 컴퓨터(102)에 의해 생성된 HTML 파일 내의 다수의 위치 범위에 맵핑될 수 있다. 하나의 소스 파일 내의 하나의 범위는 다른 소스 파일 내의 범위들을 포함할 수 있으며, 따라서 인출된 파일 내의 단일 위치가 다수의 소스 파일에 맵핑될 수 있다. 예를 들어, 소스 파일은 현재 위치에 다른 소스 파일을 포함시키기 위한 명령을 포함할 수 있다.
서버에 의해 생성되는 HTML 내의 콘텐츠는 소스 파일 내의 콘텐츠와 문자 대 문자로 동일할 수 있다. 이러한 타입의 콘텐츠는 리터럴 콘텐츠(literal content)라고 한다. 리터럴 콘텐츠는 예를 들어 HTML일 수 있다. 서버에 의해 생성되는 HTML 내의 콘텐츠는 소스 파일 내의 콘텐츠와 다를 수 있다. 이러한 타입의 콘텐츠는 논리터럴 콘텐츠(nonliteral content)라고 한다. 논리터럴 콘텐츠는 서버에 의해 생성되는 HTML 파일 내의 HTML을 생성하도록 실행되는 소스 파일 내의 코드일 수 있다. 서버에 의해 생성되는 메타데이터는 다음의 상황 정보, 즉 소스를 인출된 파일들에 맵핑하는 데 사용되는 식별자, 소스 파일 내의 시작 위치, 소스 파일 내의 종료 위치 또는 대안으로서 소스 파일 내의 길이, (출력이 생성된) 소스 파일에 대한 이름 또는 경로, 콘텐츠가 리터럴 콘텐츠인지 또는 논리터럴 콘텐츠인지를 지시하는 식별자, 인출된 파일 내의 시작 위치, 인출된 파일 내의 종료 위치 또는 대안으로서 인출된 파일 내의 길이를 포함할 수 있다. 이러한 정보는 인출된 파일로부터 소스 파일로의 변환을 가능하게 한다.
도 2a는 본 명세서에서 개시되는 발명의 양태들에 따른, 브라우저와 소스 코드 파일들 사이의 맵핑을 위한 방법(200)의 일례를 도시한다. 도 2a에서 설명되는 방법은 도 1과 관련하여 전술한 것과 같은, 그러나 이에 한정되지 않는 시스템에 의해 실시될 수 있다. 후술하는 액션들 중 일부는 선택적이다. 후술하는 액션들 중 일부는 후술하는 것과 다른 순서로 실행될 수 있다.
201에서, 브라우저가 특정 웹페이지를 요청하는 HTTP 요청을 웹 서버 컴퓨터(102)와 같은 웹 서버로 전송할 수 있다. 202에서, 서버측 브라우저 모듈들을 실행하는 웹 서버는 HTTP 요청을 수신할 수 있고, 그에 응답하여 204에서 HTML 파일 및 맵핑 메타데이터를 포함하는 응답을 생성할 수 있다. 본 명세서에서 설명되는 본 발명의 일부 양태들에 따르면, 생성된 HTML 파일은 HTML 파일 내의 각각의 출력 요소의 위치 범위들을 한정하는 주석들을 포함할 수 있다. 웹 서버 컴퓨터는 HTML 파일 내의 각각의 주석 달린 요소에 대한 상황 데이터를 포함하는 맵핑 테이블을 포함하는 메타데이터를 생성할 수 있다. 웹 서버는 주석 달린 HTML 파일 및 메타데이터를 클라이언트에게 전송할 수 있다. 206에서, 클라이언트 파일은 주석 달린 HTML 파일 및 메타데이터를 수신할 수 있다. 메타데이터는 HTML 내에 내장되거나 개별적으로 전송될 수 있다. 208에서, 메타데이터는 인출된 파일과 소스 코드 파일 사이 그리고 소스 파일과 인출된 파일 사이의 맵핑에 사용될 수 있는 데이터 구조를 생성하는 데 사용될 수 있다. 210에서, 주석들이 HTML 파일로부터 분리될 수 있고, 212에서 결과적인 동적 브라우저 파일이 표시를 위해 브라우저로 전달될 수 있다. 동적 브라우저 파일은 DOM으로서 표현될 수 있다.
컴퓨터(103)는 웹 브라우저(예로서, 브라우저(118))를 호스트(host)하는 클라이언트 컴퓨터를 나타낼 수 있다. 브라우저(118)는 Mosaic, 마이크로소프트의 Internet Explorer(등록상표), Mozilla, Netscape, Firefox 등을 포함하지만 이에 한정되지 않는 임의의 브라우저일 수 있다. 웹 브라우저는 월드 와이드 웹 상에서 정보 자원들을 검색, 제공 및 탐색(traversal)하기 위한 소프트웨어 애플리케이션이다. 정보 자원은 URI(Uniform Resouce Identifier)에 의해 식별되며, 웹페이지, 이미지, 비디오 또는 다른 콘텐츠일 수 있다. 컴퓨터(103)는 소프트웨어 개발 컴퓨터를 나타낼 수 있다. 컴퓨터(103)는 본 명세서에서 개시되는 본 발명의 양태들에 따른 IDE에서의 라이브 브라우저 도구화를 위한 하나 이상의 클라이언트 모듈(116) 등을 포함하는 IDE(110)를 호스트할 수 있다. 하나 이상의 클라이언트 모듈(116)은 브라우저(118), 맵핑 모듈(136), DOM 트리 가시화기(160), CSS 도구들(162) 및/또는 필터(124) 중 하나 이상을 포함할 수 있다. 시스템(100)은 또한 맵핑 테이블(138), (도 1에서 소스 파일(126)에 의해 표현되는) 하나 이상의 소스 파일, 인출된 파일(128) 및/또는 라이브 DOM(130)과 같은 동적 브라우저 파일 중 임의의 것 또는 전부를 포함할 수 있다. 문서 객체 모델(DOM)은 HTML, XHTML 및 XML 문서들 내의 객체들을 표현하고 그들과 상호작용하기 위한 크로스 플랫폼, 언어 독립적 규약이다. DOM 요소들은 JScript와 같은, 그러나 이에 한정되지 않는 스크립팅 언어들을 포함하는 프로그래밍 언어들에 의해 어드레스되고 처리될 수 있다. DOM은 임의의 방향으로의 내비게이션을 지원한다. 즉, DOM은 자식으로부터 그의 부모로의, 부모로부터 그의 자식으로의 그리고 자식으로부터 이전의 형제로의 내비게이션을 지원한다. 컴퓨터(103)는 또한 웹 서버 컴포넌트(예로서, 웹 프레임워크 및 서버 모듈(108)과 유사한 하나 이상의 서버 모듈)(도시되지 않음)를 포함할 수 있다. 컴퓨터(102, 103)는 네트워크(114)를 통해 접속될 수 있다.
브라우저(118)는 HTTP 요청을 웹 서버 컴퓨터(102)와 같은 웹 서버로 전송할 수 있다. 대안으로서, 요청은 컴퓨터(103) 상의 웹 서버로 전송될 수 있다. HTTP 요청은 웹사이트의 페이지에 대한 요청일 수 있다. 요청되는 HTML 파일은 본 명세서에서 설명되는 바와 같은 주석 달린 HTML 파일일 수 있다. 메타데이터는 개별적으로 전송될 수 있거나, 주석 달린 HTML 파일 내에 내장될 수 있다. HTML 파일 내의 주석들을 필요로 하지 않는 추가적인 메타데이터가 제공될 수 있다. HTTP 요청의 수신에 응답하여, 웹 서버 컴퓨터(102)는 HTML 내의 위치 범위들을 소스 파일 내의 대응하는 위치 범위들에 맵핑하는 메타데이터가 삽입되는 HTML 파일을 생성할 수 있다. 주석 달린 HTML 파일은 클라이언트 컴퓨터(103)로 전송될 수 있다. 대안으로서, 메타데이터는 개별 파일 내에서 전송될 수 있다. 클라이언트 모듈들(116) 중 하나 이상의 모듈이 주석 달린 HTML 파일, 인출된 파일(128)을 수신할 수 있고, 메타데이터 및/또는 주석들을 분리할 수 있고, 메타데이터로부터 맵핑 테이블(138)을 형성할 수 있으며, 메타데이터를 갖지 않는 브라우저용 파일을 생성할 수 있다.
브라우저가 웹페이지를 도출하고 표시하는 데 사용하는 인출된 파일로부터 생성되는 파일은 동적 브라우저 파일이라고 하며, DOM(130)과 같은 DOM으로 변환될 수 있다. 대안으로서, 메타데이터는 개별적으로 전송될 수 있다. HTTP 요청의 수신에 응답하여, 서버 모듈은 HTML 파일 및 인출된 파일 내의 각각의 출력 요소를 소스 파일 내의 대응하는 위치에 맵핑하는 메타데이터가 제공되는 메타데이터 파일을 생성할 수 있다. HTML 파일 및 메타데이터 파일은 클라이언트 컴퓨터(103)로 전송될 수 있다. 클라이언트 모듈(들)(116)은 HTML 파일(예로서, 인출된 파일(128)) 및 메타데이터 파일을 수신할 수 있다. 맵핑 모듈(136)은 메타데이터로부터 맵핑 테이블(138)을 형성할 수 있으며, HTML 파일을 브라우저에 제공할 수 있다. 맵핑 모듈(136)은 위에서 더 충분히 설명된 바와 같이 식별자들을 매칭시킴으로써 맵핑 테이블(138)을 이용하여 동적 브라우저 파일 또는 DOM(130)과 소스 파일(126) 사이의 맵핑을 행할 수 있다. 브라우저(118)는 맵핑 테이블(138) 내의 정보에 기초하여 브라우저(118) 내에 표시되고 있는 페이지에 대한 소스 코드 파일(예로서, 소스 코드 편집기(예로서, 소스 코드 편집기(119)) 내의 소스 파일(126))을 브라우저 표시에 인접하게 동시에 표시할 수 있다.
컴퓨터(103)는 본 명세서에서 개시되는 본 발명의 양태들에 따라 브라우저에서의 선택과 웹 서버로부터 인출된 파일 간의 맵핑을 행하는 하나 이상의 모듈(예로서, 선택 맵핑 모듈(137))을 포함하는 IDE(110)를 호스트할 수 있다. 선택 맵핑 모듈(137)은 필터링 모듈을 포함할 수 있다. 대안으로서, 필터(124)와 같은 필터링 모듈은 선택 맵핑 모듈(137) 밖에 위치할 수 있다. 선택 맵핑 모듈(137)은 차별화 모듈을 포함할 수 있다. 대안으로서, 차별화 모듈(120)과 같은 차별화 모듈은 선택 맵핑 모듈(137) 밖에 위치할 수 있다. 선택 맵핑 모듈(137)은 블록 리스트 생성 모듈을 포함할 수 있다. 대안으로서, 블록 리스트 생성 모듈(122)과 같은 블록 리스트 생성 모듈은 선택 맵핑 모듈(137) 밖에 위치할 수 있다. IDE(110)는 브라우저(118), 레이아웃 엔진(도시되지 않음) 및/또는 브라우저 내에 렌더링된 파일 상에서 실행되는 스크립팅 언어(150) 중 하나 이상을 포함할 수 있다. IDE(110)는 소스 코드 편집기(119)와 같은 소스 코드 편집기를 포함할 수 있다.
시스템(100)은 또한 인출된 파일(128)과 같은 인출된 파일, DOM(130)과 같은 동적 브라우저 파일, 인출된 파일 블록 리스트(129)와 같은 인출된 파일로부터 도출된 블록 리스트, 및 DOM 블록 리스트(127)와 같은 DOM으로부터 도출된 블록 리스트 중 임의의 것 또는 전부를 포함할 수 있다. 브라우저(118)는 웹사이트의 페이지에 대한 요청(예로서, HTTP 요청)을 웹 서버로 전송할 수 있다. 이에 응답하여, 브라우저(118)는 웹 서버로부터 웹 페이지를 수신할 수 있다. 웹페이지는 HTML 파일일 수 있다. 브라우저(118)에 의해 수신되는 파일은 메모리(145) 내에 인출된 파일(128)로서 저장될 수 있다. 본 명세서에서 설명되는 본 발명의 일부 양태들에 따르면, HTML 파일이 웹 서버로부터 수신될 때, 필터(124)와 같은 모듈은 HTML 파일 내의 각각의 요소에 식별자를 할당할 수 있으며, 따라서 각각의 상이한 요소는 그 자신의 식별자를 할당받는다. 단어들도 식별자들을 할당받을 수 있다. HTML 파일 내의 요소는 HTML 시작 태그 및 HTML 종료 태그 쌍의 존재에 의해 한정된다. 필터(124)는 MIME(다목적 인터넷 메일 확장) 타입 "텍스트"에 대해 작용하는 MIME 필터일 수 있다. 대안으로서, 스크립팅 언어가 실행되기 전의 다른 시간에(예를 들어, HTML 파일이 브라우저 내에 렌더링된 후에) HTML 파일 내의 각각의 요소에 식별자가 할당될 수 있다는 것을 알 것이다.
스크립팅 언어가 실행되고, 요소들이 이동하거나 변경되는 경우에도, 식별자는 DOM 내의 요소들이 인출된 파일 내의 요소들에 맵핑되는 것을 가능하게 하며, 그 반대도 가능하게 한다. 제거되는 요소들은 맵핑될 수 없다는 것을 알 것이다. 유사하게, DOM 내에 삽입되는 요소는 인출된 파일 내의 대응하는 요소에 맵핑될 수 없는데, 그 이유는 인출된 파일 내에 그 대응하는 요소가 없기 때문이다. 인출된 HTML 파일(128)은 DOM(130)과 같은 문서 객체 모델(DOM)로 파싱(parsing)될 수 있다. 문서 객체 모델(DOM)은 HTML, XHTML 및 XML 문서들 내의 객체들을 표현하고 그들과 상호작용하기 위한 크로스 플랫폼, 언어 독립적 규약이다. DOM 요소들은 JScript와 같은, 그러나 이에 한정되지 않는 스크립팅 언어들을 포함하는 프로그래밍 언어들에 의해 어드레스되고 다뤄질 수 있다. DOM은 임의의 방향으로의 내비게이션을 지원한다. 즉, DOM은 자식으로부터 그의 부모로의, 부모로부터 그의 자식으로의 그리고 자식으로부터 이전의 형제로의 내비게이션을 지원한다.
인출된 파일(128)로부터 생성된 DOM(130)은 메모리(145)에 저장될 수 있으며, 브라우저(118) 내에 뷰(104)와 같은 웹페이지의 뷰를 표시하기 위해 레이아웃 엔진에 의해 사용될 수 있다. DOM(130)은 스크립팅 언어의 실행에 의해 변경될 수 있다. 따라서, DOM(130)은 시간이 지남에 따라 변경될 수 있으며, 동적이다. 브라우저(118)가 서버로부터 인출된 웹페이지를 처음 제공할 때, 뷰(104)는 인출된 파일(128)에 대응한다. HTML의 DOM으로의 변환은 스크립팅 언어가 브라우저(118) 내에서 실행되는 것을 가능하게 한다. JScript와 같은 스크립팅 언어가 실행될 수 있다. 스크립팅 언어가 실행될 때, 스크립팅 언어는 DOM을 변경할 수 있다. DOM이 변경될 때, 뷰(104)는 브라우저에서 변경될 수 있다. 따라서, 스크립팅 언어가 실행되자마자, 인출된 파일은 현재 뷰를 더 이상 반영하지 않을 것이다. DOM이 변경될 때, 대응하는 변경이 뷰(104) 내에 반영된다.
블록 리스트 생성 모듈(122)과 같은 블록 리스트 생성 모듈이 DOM(130)으로부터 블록 리스트(예로서, DOM 블록 리스트(127))를 생성할 수 있다. 블록 리스트 생성 모듈(122)과 같은 블록 리스트 생성 모듈이 인출된 파일(128)로부터 블록 리스트(예로서, 인출된 파일 블록 리스트(129))를 생성할 수 있다. 차별화 모듈(120)과 같은 차별화 모듈이 인출된 파일 블록 리스트(129) 및 DOM 블록 리스트(127)에 대해 실행되어, DOM이 인출된 파일을 더 이상 반영하지 않는 경우에도 블록 리스트들 간의 맵핑을 수행할 수 있다. 차별화 모듈(120)에 의해 수행되는 처리는 아래에 더 상세히 설명된다.
따라서, 본 명세서에서 개시되는 본 발명의 양태들에 따르면, 스크립팅 언어가 브라우저(118)에서 뷰(104)의 기초가 되는 DOM 데이터 구조를 변경할 때, 차별화 알고리즘은 DOM 및 인출된 파일에 대한 블록 리스트들에 대해 실행되어, 블록 리스트들의 변경들의 맵핑을 처리할 수 있다. DOM 블록 리스트(127)는 스크립팅 언어의 실행에 의해 이루어진 변경들을 반영하도록 변경될 수 있다.
도 2b는 본 명세서에서 개시되는 발명의 양태들에 따른, 브라우저에서의 선택을 웹 서버로부터 인출된 파일에 맵핑하는 방법(203)의 일례를 도시한다. 도 2b에서 설명되는 방법은 도 1과 관련하여 설명된 것과 같은, 그러나 이에 한정되지 않는 시스템에 의해 실시될 수 있다. 후술하는 액션들 중 일부는 옵션일 수 있다. 후술하는 액션들 중 일부는 후술하는 것과 다른 순서로 실행될 수 있다.
213에서, 브라우저가 HTTP 요청과 같은 요청을 웹 서버로 전송할 수 있다. 214에서, 브라우저는 웹 서버로부터 요청된 파일을 수신할 수 있다. 브라우저 요청에 응답하여 브라우저에 의해 수신된 파일은 본 명세서에서 인출된 파일로서 지칭된다. 인출된 파일은 HTML 파일일 수 있다. 인출된 파일은 메모리 내에 로딩될 수 있다. 214에서, 인출된 파일이 수신됨에 따라, 216에서 HTML 파일 내의 요소들이 식별자들을 할당받을 수 있으며, 따라서 각각의 상이한 요소가 그 자신의 식별자를 할당받는다. HTML 파일은 DOM으로 변환되고, 브라우저에 의해 렌더링될 수 있다. 실행 동안, 218에서, JScript와 같은, 그러나 이에 한정되지 않는 스크립팅 언어가 DOM에 대해 실행될 수 있다. 스크립팅 언어는 220에서 실행될 때 DOM을 변경할 수 있다. 222에서, 아래에 더 충분히 설명되는 바와 같이 블록 식별자들을 매칭시킴으로써 DOM과 인출된 파일 간의 연관성이 생성될 수 있다. 224에서, 브라우저에 표시된 문서의 일부를 선택하는 사용자 입력에 응답하여, 선택이 DOM의 일부에 맵핑될 수 있다. 226에서, DOM의 일부는 인출된 파일의 섹션에 맵핑될 수 있다.
도 2c는 본 명세서에서 개시되는 발명의 양태들에 따른, DOM 및 인출된 파일 내의 위치 범위들 사이의 연관성을 생성하는 방법(290)의 일례를 도시한다. 도 2c에서 설명되는 방법은 도 1과 관련하여 설명된 것과 같은, 그러나 이에 한정되지 않는 시스템에 의해 실시될 수 있다. 후술하는 액션들 중 일부는 옵션일 수 있다. 후술하는 액션들 중 일부는 후술하는 것과 다른 순서로 실행될 수 있다.
292에서, 상이한 식별자가 인출된 파일 내의 각각의 요소에 할당될 수 있다. 요소는 시작 및 종료 태그의 존재에 의해 식별될 수 있다. 294에서, 인출된 파일로부터 블록 리스트가 생성될 수 있다. DOM으로부터 다른 블록 리스트가 생성될 수 있다. 인출된 파일(HTML 파일)에 대한 블록 리스트를 생성하기 위하여, 파일이 파싱될 수 있고, HTML 파일에서 만난 각각의 시작 및 종료 태그 쌍에 대해 블록이 생성될 수 있다. 요소에 할당된 식별자가 저장될 수 있다. HTML 파일 내의 각각의 단어에 대해 블록이 생성될 수 있다. 본 명세서에서 설명되는 본 발명의 일부 양태들에 따르면, 단어는 단어의 해시(hash)인 식별자를 할당받을 수 있다. 따라서, HTML 파일에서 특정 단어를 두 번 이상 만나는 경우, 특정 단어의 각각의 발생은 동일한 식별자를 가질 것이다.
DOM(294)에 대한 블록 리스트를 생성하기 위하여, DOM을 HTML 파일로 변환할 수 있고, 인출된 파일과 관련하여 전술한 프로세스를 이용하여 DOM 블록 리스트를 생성할 수 있다. 대안으로서, DOM 트리를 돌아볼 수 있으며, 그로부터 전술한 바와 같은 DOM 블록 리스트를 생성할 수 있다. 296에서, 차별화 모듈이 2개의 생성된 블록 리스트에 대해 차별화 알고리즘, 예를 들어 수정된 Heckel 차별화 알고리즘을 실행할 수 있다. 차별화 알고리즘은 DOM 블록 리스트 및 인출된 파일 블록 리스트에 대해 실행될 수 있다. HTML 내의 각각의 시작 및 종료 태그가 블록으로 간주될 수 있다. 따라서, 인출된 파일 내의 그리고 DOM 내의 모든 단어에 대해 그리고 모든 시작 또는 종료 태그 쌍에 대해 블록이 생성될 수 있다. 동일 태그가 HTML 문서에서 두 번 이상 자주 사용되므로, (예를 들어, 고유 식별자를 이용하여 인출된 파일 내의 대응하는 요소의 속성을 설정함으로써) 각각의 시작 태그에 고유 식별자가 할당될 수 있다. 단어들은 그들의 텍스트를 그들의 식별자로서 사용하며, 따라서 문서 내에 동일 단어가 두 번 이상 존재하는 경우에는 고유하지 않을 것이다. 인출된 파일 블록이 DOM 블록의 고유 식별자와 매칭되는 고유 식별자를 갖는 경우, 2개의 블록은 동일한 것으로 결정된다. 그들의 연관성이 기록될 수 있다. 인출된 파일 블록이 텍스트의 경우와 같이 고유하지 않은 식별자를 갖지 않지만, 인출된 파일 내의 관련 블록에 인접하여 존재하고, 매칭되는 식별자를 갖는 블록이 DOM 내의 대응하는 블록에 인접하여 존재하는 경우, 2개의 블록은 동일 블록인 것으로 결정된다. 그들의 연관성이 기록될 수 있다. 블록 리스트 내에서의 이러한 처리를 앞뒤로 반복 적용함으로써 고유하지 않은 식별자들을 갖는 변경되지 않은 블록들의 연관성을 발견한다. 기록된 연관성을 이용하여, 인출된 파일 및 DOM 블록 리스트들 간의 맵핑을 수행하고, 그 반대도 수행한다.
도 2d는 인출된 파일에 대한 블록 리스트(예로서, 인출된 파일 블록 리스트(232)) 및 DOM에 대한 블록 리스트(예로서, DOM 블록 리스트(234))의 일례(230)를 도시한다. 각각의 파일 내의 동일한 블록들은 할당된 식별자들을 이용하여 서로 연관될 수 있다(예를 들어, 인출된 파일 블록 리스트(232)의 id=AAA(240)에 의해 식별되는 블록은 DOM 블록 리스트(234) 내의 id=AAA(242)에 의해 식별되는 블록에 맵핑된다). 예를 들어, 도 2c에서, 인출된 파일 블록 리스트(232) 내의 블록(236)은 DOM 블록 리스트(234) 내의 블록(238)과 동일하다. 블록(236)은 블록(238)에 맵핑될 수 있고, 그 반대도 가능한데, 그 이유는 블록(236)의 식별자(240)가 블록(238)의 식별자(242)와 동일하기 때문이다. DOM 블록 리스트(234) 내의 블록(244)은 인출된 파일 블록 리스트(232) 내의 블록에 맵핑되지 못하는데, 그 이유는 인출된 파일이 수신된 후에 "<img/>"가 DOM에 추가되었기 때문이다. 인출된 파일 블록 리스트(232) 내의 블록(246)("WORLD")은 DOM 블록 리스트(234) 내에 유사한 블록을 갖지 않는데, 그 이유는 인출된 파일이 웹 서버로부터 수신된 후에 DOM에서 "WORLD"가 삭제되었기 때문이다.
텍스트의 블록들은 (예를 들어, 텍스트가 속성을 갖지 못하므로) 식별자를 갖지 못할 수 있지만, 동일한 식별자들을 갖는 식별된 블록들에 이어지는 양 블록 리스트 내의 식별되지 않는 텍스트의 블록들이 동일 블록들인 것으로 가정함으로써 DOM 블록 리스트 내의 텍스트의 블록들이 인출된 파일 블록 리스트 내의 텍스트의 블록들에 맵핑될 수 있다. 예를 들어, 인출된 파일 블록 리스트(232) 내의 블록(236)은 DOM 블록 리스트 내의 블록(238)에 맵핑될 수 있는데, 그 이유는 블록(236) 내의 식별자 id=AAA(240)가 블록(238) 내의 식별자 id=AAA(242)와 동일하기 때문이다.
브라우저에서의 문서 선택들은 DOM에 대한 블록 리스트 내의 어느 블록이 브라우저에서의 선택에 대응하는지를 결정함으로써 동적 브라우저 파일의 텍스트에 맵핑될 수 있다. 마이크로소프트의 Internet Explorer, Mozilla 등과 같은 브라우저에서 선택 이벤트가 발생할 때, 선택된 스트링 및 선택 상황(즉, DOM 내의 현재 위치)을 포함하는 객체가 반환될 수 있다. 브라우저에서 이루어진 선택에 대응하는 DOM 블록 리스트 내의 블록을 결정하기 위하여, 식별자(예로서, ID=x)를 갖는 시작 태그가 발견될 때까지, DOM 내의 현재 위치로부터 DOM의 시작을 향하는 내비게이션이 수행될 수 있다. 시작 태그를 만날 때까지 역방향 탐색에서 만나는 문자들이 기록될 수 있다. DOM 블록 리스트 내의 대응하는 블록(즉, ID=x를 갖는 블록)이 액세스된다. 선택에 대응하는 위치를 만날 때까지 블록 리스트 및 DOM이 순방향으로 탐색된다. DOM 블록 리스트와 인출된 파일 블록 리스트 간의 연관성을 이용하여, 인출된 파일 내의 대응하는 위치에 맵핑할 수 있다.
도 2e는 브라우저에서의 선택(예로서, 선택된 텍스트)으로부터 DOM 블록 리스트로의, 이어서 인출된 파일로의 맵핑의 일례(270)를 도시한다. 브라우저에서 관찰되고 있는 파일 내에서 아래의 코드가 발견되는 것으로 가정한다.
Figure 112013114304438-pct00001
사용자가 뷰 내에서 단어 Hello로부터 두 번째 문자 "l"을 선택(선택 278)하는 것으로 가정한다. 선택 이벤트는 선택된 스트링 및 문서 내의 선택 위치를 갖는 객체를 반환할 수 있다. DOM(예로서, 뷰(272)) 내의 현재 위치(279)로부터 시작하여, 인출된 문서에 맵핑될 수 있는 ID를 포함하는 제1 요소가 발견될 때까지(예로서, 블록 237까지), 데이터 구조에서 좌측으로, 도 2d에서 위로, DOM의 시작을 향해 이동하여 DOM이 탐색될 수 있다. 도중에 만나는 문자들이 기록될 수 있다(즉, 이 예에서, "L", "L", "E", "H" 및 "<DIV>"가 기록될 수 있다).
블록(237) 내의 시작 태그에 대한 식별자(ID=AAA)(281)를 이용하여, ID=AAA(283)를 갖는 DOM 블록 리스트 내의 블록, 즉 블록(280)이 액세스될 수 있다. 기록된 문자 "<DIV>", "H", "E", "L", "L"을 만날 때까지 DOM(뷰(272)) 및 DOM 블록 리스트(274) 양자를 순방향으로 탐색한다. DOM 블록 리스트(274)와 인출된 파일 블록 리스트(276) 사이의 연관성을 이용하여 인출된 파일 내에서 "L"(284)을 "L"(282)에 맵핑할 수 있다.
브라우저(118)는 브라우저에서 개발자에게 렌더링 및 표시되는 것이 서버 거동의 시뮬레이션된 해석이 아니라 생산 서버의 응답이도록 서버에 대한 충분한 왕복을 행함으로써 개발중인 페이지 내에 콘텐츠를 렌더링할 수 있다. 인출된 파일(128)이 서버 코드에 의해 생성될 때, 메타데이터가 방출되고 클라이언트 컴퓨터로 전송될 수 있다. 메타데이터는 인출된 파일(128) 내에 삽입될 수 있거나, 개별적으로 전송될 수 있다. 필터(124)와 같은 필터는 인출된 파일(예로서, 인출된 파일(128))로부터 메타데이터를 필터링하는 플러깅(plugging) 가능한 MIME 필터일 수 있다. 서버 컴퓨터(102)로부터 수신되는 오리지널 파일은 브라우저(118) 내에 내장된 스크립팅 언어(150)와 같은 스크립팅 언어의 실행에 의해 변경될 수 있다.
문서 객체 모델(DOM) 도구(예로서, DOM 트리 가시화기(160))는 인출된 파일로부터 브라우저 페이지를 표현하는 트리 데이터 구조의 가시화를 제공할 수 있다. 캐스케이드 스타일 시트(CSS) 도구(예로서, CSS 도구(162))는 선택된 스타일 특성을 그의 소스 코드 파일에 역맵핑하여, 규칙 또는 속성을 선택하거나 규칙 또는 속성을 변경함으로써 HTML 요소의 스타일 특성에 대한 고려된 변경이 자동으로 영속화되도록 할 수 있다. 맵핑 브라우저 모듈들은 관찰된 변경을 요소의 외관을 책임지는 소스 파일에 자동으로 맵핑할 수 있다. 개발자는 또한 소스 파일에 변경을 적용하지 않고서 브라우저에서 고려된 스타일 변경을 관찰할 수 있다.
도 2f는 본 명세서에서 개시되는 발명의 양태들에 따른, IDE에서의 동적 브라우징 도구화를 제공하기 위한 방법(275)의 일례를 도시한다. 도 2에서 설명되는 방법은 도 1과 관련하여 설명된 것과 같은, 그러나 이에 한정되지 않는 시스템에 의해 실시될 수 있다. 후술하는 액션들 중 일부는 선택적일 수 있다. 후술하는 액션들 중 일부는 후술하는 것과 다른 순서로 실행될 수 있다.
241에서, 맵핑 브라우저가 특정 웹페이지를 요청하는 HTTP 요청을 웹 서버(102)와 같은 웹 서버로 전송할 수 있다. 243에서, 서버측 맵핑 브라우저 모듈들을 실행하는 웹 서버는 HTTP 요청을 수신할 수 있고, 이에 응답하여 245에서 HTML 파일을 포함하는 응답을 생성할 수 있다. 생산된 HTML 파일은 HTML 파일 내의 각각의 출력 범위의 소스 파일 위치를 지시하는 메타데이터를 포함할 수 있다. 웹 서버는 HTML 파일 내의 각각의 주석 달린 출력 범위에 대한 상황 데이터를 포함하는 맵핑 테이블을 포함하는 메타데이터를 생성할 수 있다. 웹 서버는 메타데이터를 갖는 HTML 파일을 클라이언트로 전송할 수 있다. 247에서, 클라이언트측은 메타데이터를 갖는 HTML 파일을 수신할 수 있다. 248에서, 메타데이터가 HTML 파일로부터 추출될 수 있고, 인출된 파일과 소스 코드 파일 사이 및 소스 파일과 인출된 파일 사이를 맵핑하는 데 사용될 수 있는 데이터 구조(예를 들어, 맵핑 테이블(138))를 생성하는 데 사용될 수 있다. 250에서, 메타데이터가 HTML 파일로부터 분리될 수 있다. 결과적인 파일은 252에서의 표시를 위해 브라우저로 전달될 수 있다. 결과적인 동적 파일이 DOM으로 변환될 수 있다. 실행 동안, 254에서, JavaScript와 같은, 그러나 이에 한정되지 않는 스크립팅 언어가 DOM에 대해 실행될 수 있다. 스크립팅 언어는 실행될 때 DOM을 변경할 수 있다.
258에서, 오리지널 HTML 파일(인출된 파일) 및 DOM일 수 있는 동적 브라우저 파일 상에 실행되는 차별화 알고리즘에 의해 생성된 블록 식별자들을 매칭시킴으로써 동적 브라우저 파일과 인출된 파일 사이의 연관성이 생성될 수 있다. HTML 내의 각각의 시작 및 종료 태그가 블록으로 간주될 수 있다. 따라서, 인출된 파일 내의 그리고 동적 브라우저 파일 내의 모든 단어에 대해 그리고 모든 시작 또는 종료 태그에 대해 블록이 생성될 수 있다. 동일 태그가 HTML 문서에서 두 번 이상 자주 사용되므로, (예를 들어, DOM 내의 대응하는 객체의 속성을 고유 식별자로 설정함으로써) 각각의 시작/종료 태그 쌍에 고유 식별자가 할당될 수 있다. 제1 블록 리스트가 인출된 파일에 대해 생성될 수 있고, 제2 블록 리스트가 동적 브라우저 파일에 대해 생성될 수 있다. 인출된 파일 내의 고유 블록에 바로 인접하여, 동일 블록이 동적 브라우저 파일 내의 대응하는 고유 블록 옆에 존재하는 것으로 결정하는 것에 응답하여, 2개의 블록은 동일 블록인 것으로 결정된다. 고유 블록들로부터 앞뒤로 이 처리를 반복 적용하는 것은 변경되지 않는 블록들의 시퀀스들을 발견한다. 2개의 파일 내의 동일 블록들이 서로 맵핑될 수 있다. 즉, 동적 브라우저 파일 내의 블록들은 인출된 파일에 맵핑될 수 있고, 그 반대도 가능하다. 260에서, 브라우저에 표시된 문서의 일부를 선택하는 사용자 입력에 응답하여, 선택이 동적 브라우저 파일의 일부에 맵핑될 수 있다. 동적 브라우저 파일의 일부는 인출된 파일의 일부에 맵핑될 수 있다. 262에서, 인출된 파일의 일부는 소스 파일의 대응하는 섹션에 맵핑될 수 있다.
적절한 컴퓨팅 환경의 예
본 명세서에서 개시되는 본 발명의 다양한 양태들에 대한 상황을 제공하기 위하여, 도 3 및 아래의 설명은 본 명세서에서 개시되는 본 발명의 다양한 실시예들이 구현될 수 있는 적절한 컴퓨팅 환경(510)의 간단한 일반적인 설명을 제공하는 것을 의도한다. 본 명세서에서 개시되는 본 발명은 하나 이상의 컴퓨터 또는 다른 컴퓨팅 장치에 의해 실행되는 프로그램 모듈들과 같은 컴퓨터 실행 가능 명령어들과 일반적인 문맥으로 설명되지만, 이 분야의 기술자들은 본 명세서에서 개시되는 본 발명의 부분들이 다른 프로그램 모듈들 및/또는 하드웨어와 소프트웨어의 조합과 연계하여 구현될 수도 있다는 것을 인식할 것이다. 일반적으로, 프로그램 모듈들은 특정 작업들을 수행하거나 특정 추상 데이터 형들을 구현하는 루틴들, 프로그램들, 객체들, 물리적 아티팩트들, 데이터 구조들 등을 포함한다. 통상적으로, 프로그램 모듈들의 기능은 다양한 실시예들에서 필요에 따라 결합되거나 분산될 수 있다. 컴퓨팅 환경(510)은 적절한 운영 환경의 일례일 뿐이며, 본 명세서에서 개시되는 본 발명의 이용 또는 기능의 범위를 한정하는 것을 의도하지 않는다.
도 3을 참조하여, 컴퓨터(512) 형태의 컴퓨팅 장치가 설명된다. 컴퓨터(512)는 처리 유닛(514), 시스템 메모리(516) 및 시스템 버스(518)를 포함할 수 있다. 처리 유닛(514)은 임의의 다양한 이용 가능 프로세서일 수 있다. 이중 마이크로프로세서들 및 다른 멀티프로세서 아키텍처들도 처리 유닛(514)으로 사용될 수 있다. 시스템 메모리(516)는 휘발성 메모리(520) 및 비휘발성 메모리(522)를 포함할 수 있다. 비휘발성 메모리(522)는 판독 전용 메모리(ROM), 프로그래밍 가능 ROM(PROM), 전기적 프로그래밍 가능 ROM(EPROM) 또는 플래시 메모리를 포함할 수 있다. 휘발성 메모리(520)는 외부 캐시 메모리로서 동작할 수 있는 랜덤 액세스 메모리(RAM)를 포함할 수 있다. 시스템 버스(518)는 시스템 메모리(516)를 포함하는 시스템 물리 아티팩트들을 처리 유닛(514)에 결합한다. 시스템 버스(518)는 메모리 버스, 메모리 제어기, 주변 장치 버스, 외부 버스 또는 로컬 버스를 포함하는 임의의 다양한 타입일 수 있으며, 임의의 다양한 이용가능한 버스 아키텍처를 이용할 수 있다.
컴퓨터(512)는 통상적으로 휘발성 및 비휘발성 매체, 이동식 및 비이동식 매체와 같은 다양한 컴퓨터 판독 가능 매체들을 포함한다. 컴퓨터 저장 매체들은 컴퓨터 판독 가능 명령어들, 데이터 구조들, 프로그램 모듈들 또는 다른 데이터와 같은 정보의 저장을 위한 임의의 방법 또는 기술에서 구현될 수 있다. 컴퓨터 저장 매체들은 RAM, ROM, EEPROM, 플래시 메모리 또는 다른 메모리 기술, CDROM, 디지털 다기능 디스크(DVD) 또는 다른 광 디스크 저장 장치, 자기 카세트, 자기 테이프, 자기 디스크 저장 장치 또는 다른 자기 저장 장치, 또는 원하는 정보를 저장하는 데 사용될 수 있고 컴퓨터(512)에 의해 액세스될 수 있는 임의의 다른 일시적 또는 비일시적 매체를 포함하지만 이에 한정되지 않는다.
도 3은 사용자들과 컴퓨터 자원들 사이에 매개물로서 작용할 수 있는 소프트웨어를 설명한다는 것을 알 것이다. 이러한 소프트웨어는 디스크 저장 장치(524)에 저장될 수 있고 컴퓨터(512)의 자원들을 할당할 수 있는 운영 체제(528)를 포함할 수 있다. 디스크 저장 장치(524)는 인터페이스(526)와 같은 비이동식 메모리 인터페이스를 통해 시스템 버스(518)에 접속된 하드 디스크 드라이브일 수 있다. 시스템 애플리케이션들(530)은 시스템 메모리(516)에 또는 디스크 저장 장치(524)에 저장된 프로그램 모듈들(532) 및 프로그램 데이터(534)를 통한 운영 체제(528)에 의한 자원들의 관리를 이용한다. 컴퓨터들은 다양한 운영 체제들 또는 운영 체제들의 조합들을 갖도록 구현될 수 있다는 것을 알 것이다.
사용자는 입력 장치(들)(536)를 통해 컴퓨터(512) 내에 명령들 또는 정보를 입력할 수 있다. 입력 장치들(536)은 마우스와 같은 포인팅 장치, 트랙볼, 스타일러스, 터치 패드, 키보드, 마이크 등을 포함하지만 이에 한정되지 않는다. 이들 및 다른 입력 장치들은 인터페이스 포트(들)(538)을 통해 시스템 버스(518)를 통해 처리 유닛(514)에 접속된다. 인터페이스 포트(들)(538)는 직렬 포트, 병렬 포트, 유니버설 직렬 버스(USB) 등을 나타낼 수 있다. 출력 장치(들)(540)는 입력 장치들이 이용하는 것과 동일한 타입의 포트들을 이용할 수 있다. 특정 어댑터들을 필요로 하는 모니터, 스피커 및 프린터와 같은 일부 출력 장치들(540)이 존재한다는 것을 나타내기 위해 출력 어댑터(542)가 제공된다. 출력 어댑터들(542)은 출력 장치(540)와 시스템 버스(518) 사이의 접속을 제공하는 비디오 및 사운드 카드들을 포함하지만 이에 한정되지 않는다. 원격 컴퓨터(들)(544)와 같은 다른 장치들 및/또는 시스템들 또는 장치들이 입력 및 출력 기능들 둘 다를 제공할 수 있다.
컴퓨터(512)는 원격 컴퓨터(들)(544)와 같은 하나 이상의 원격 컴퓨터에 대한 논리적 접속들을 이용하여 네트워킹된 환경에서 동작할 수 있다. 원격 컴퓨터(544)는 개인용 컴퓨터, 서버, 라우터, 네트워크 PC, 피어 장치 또는 다른 범용 네트워크 노드일 수 있으며, 도 3에는 메모리 저장 장치(546)만이 도시되었지만, 통상적으로는 컴퓨터(512)와 관련하여 전술한 요소들 중 다수 또는 전부를 포함한다. 원격 컴퓨터(들)(544)는 통신 접속(들)(550)을 통해 논리적으로 접속될 수 있다. 네트워크 인터페이스(548)는 근거리 네트워크(LAN) 및 광역 네트워크(WAN)와 같은 통신 네트워크들을 포함하지만, 다른 네트워크들도 포함할 수 있다. 통신 접속(들)(550)은 네트워크 인터페이스(548)를 버스(518)에 접속하는 데 사용되는 하드웨어/소프트웨어를 지칭한다. 통신 접속(들)(550)은 컴퓨터(512) 내부 또는 외부에 위치할 수 있으며, 모뎀(전화, 케이블, DSL 및 무선), ISDN 어댑터, 이더넷 카드 등과 같은 내장 및 외장 기술들을 포함할 수 있다.
도시된 네트워크 접속들은 예들일 뿐이며, 컴퓨터들 사이에 통신 링크를 형성하는 다른 수단들이 이용될 수 있다는 것을 알 것이다. 이 분야의 통상의 기술자는 컴퓨터(512) 또는 다른 클라이언트 장치가 컴퓨터 네트워크의 일부로서 배치될 수 있다는 것을 알 수 있다. 이와 관련하여, 본 명세서에서 개시되는 발명은 임의 수의 메모리 또는 저장 유닛들을 갖는 임의의 컴퓨터 시스템, 및 임의의 수의 저장 유닛들 또는 볼륨들에 걸쳐 발생하는 임의의 수의 애플리케이션들 및 프로세스들과 관련될 수 있다. 본 명세서에서 설명되는 본 발명의 양태들은 원격 또는 로컬 저장 장치를 갖는, 네트워크 환경 내에 배치된 서버 컴퓨터들 및 클라이언트 컴퓨터들을 갖는 환경에 적용될 수 있다. 본 명세서에서 설명되는 본 발명의 양태들은 프로그래밍 언어 기능, 해석 및 실행 능력들을 갖는 독립 컴퓨팅 장치에도 적용될 수 있다.
도 4는 통합 개발 환경(IDE)(600) 및 범용 언어 런타임 환경(602)을 도시한다. IDE(600)는 사용자(예를 들어, 개발자, 프로그래머, 디자이너, 코더 등)가 컴퓨터 시스템에서 프로그램, 프로그램들의 세트, 웹사이트, 웹 애플리케이션 및 웹 서비스를 설계, 코딩, 컴파일, 테스트, 실행, 편집, 디버깅 또는 구축하는 것을 가능하게 할 수 있다. 소프트웨어 프로그램들은 하나 이상의 소스 코드 언어(Visual Basic, Visual J#, C++, C#, J#, Java Script, APL, COBOL, Pascal, Eiffel, Haskell, ML, Oberon, Perl, Python, Scheme, Smalltalk 등)에서 생성된 소스 코드(컴포넌트(610))를 포함할 수 있다. IDE(600)는 네이티브 코드 개발 환경을 제공할 수 있거나, 가상 기계에서 실행되는 관리 코드 개발을 제공할 수 있거나, 이들의 조합을 제공할 수 있다. IDE(600)는 .NET 프레임워크를 이용하여 관리 코드 개발 환경을 제공할 수 있다. 언어 고유 소스 컴파일러(620)를 이용하여 소스 코드 컴포넌트(610) 및 네이티브 코드 컴포넌트(611)로부터 중간 언어 컴포넌트(650)가 생성될 수 있으며, 네이티브 코드 컴포넌트(611)(예로서, 기계 실행 가능 명령어들)는 애플리케이션이 실행될 때 중간 언어 컴파일러(660)(예를 들어, JIT(just-in-time) 컴파일러)를 이용하여 중간 언어 컴포넌트(650)로부터 생성된다. 즉, IL 애플리케이션이 실행될 때, 이 애플리케이션은 실행되는 동안 그가 실행되고 있는 플랫폼에 대한 적절한 기계 언어로 컴파일되며, 따라서 여러 플랫폼에 걸쳐 이식 가능한 코드가 형성된다. 대안으로서, 다른 실시예들에서, 프로그램들은 그의 의도된 플랫폼에 적합한 네이티브 코드 기계 언어(도시되지 않음)로 컴파일될 수 있다.
사용자는 IDE(600) 내의 사용자 인터페이스(640) 및 소스 코드 편집기(651)를 통해, 공지된 소프트웨어 프로그래밍 기술들 및 특정 소스 언어와 관련된 특정 논리 및 구문론적 규칙들에 따라 소스 코드 컴포넌트를 생성 및/또는 편집할 수 있다. 이어서, 소스 코드 컴포넌트(610)는 소스 컴파일러(620)를 통해 컴파일될 수 있고, 따라서 어셈블리(630)와 같은 프로그램의 중간 언어 표현이 생성될 수 있다. 어셈블리(630)는 중간 언어 컴포넌트(650) 및 메타데이터(642)를 포함할 수 있다. 애플리케이션 설계들은 배치 전에 검증될 수 있다.
본 명세서에서 설명되는 다양한 기술들은 하드웨어 또는 소프트웨어 또는 적절한 경우에는 이들의 조합과 관련하여 구현될 수 있다. 따라서, 본 명세서에서 설명되는 방법들 및 장치들 또는 이들의 소정 양태들 또는 부분들은 플로피 디스켓, CD-ROM, 하드 드라이브, 또는 임의의 다른 기계 판독 가능 저장 매체와 같은 유형 매체들 내에 구현되는 프로그램 코드(즉, 명령어들)의 형태를 취할 수 있으며, 프로그램 코드가 컴퓨터와 같은 기계 내에 로딩되고 그에 의해 실행될 때 기계는 본 명세서에서 개시되는 본 발명의 양태들을 실시하기 위한 장치가 된다. 본 명세서에서 사용될 때, 용어 "기계 판독 가능 매체"는 임의의 형태의 전파 신호들을 제공(즉 저장 및/또는 전송)하는 임의의 메커니즘을 배제하는 것으로 간주되어야 한다. 프로그래밍 가능한 컴퓨터들 상에서의 프로그램 코드 실행의 경우, 컴퓨팅 장치는 일반적으로 프로세서, 프로세서에 의해 판독 가능한 저장 매체(휘발성 및 비휘발성 메모리 및/또는 저장 요소들을 포함함), 적어도 하나의 입력 장치 및 적어도 하나의 출력 장치를 포함할 것이다. 예를 들어 데이터 처리 API 등의 사용을 통해 도메인 고유 프로그래밍 모델 양태들의 생성 및/또는 구현을 이용할 수 있는 하나 이상의 프로그램은 컴퓨터 시스템과 통신하기 위해 하이 레벨 절차 또는 객체 지향 프로그래밍 언어로 구현될 수 있다. 그러나, 프로그램(들)은 원할 경우에 어셈블리 또는 기계 언어에서 구현될 수 있다. 어느 경우에나, 언어는 컴파일되거나 해석되는 언어이고, 하드웨어 구현들과 결합될 수 있다.
본 발명은 구조적 특징들 및/또는 방법적 동작들에 고유한 언어로 설명되었지만, 첨부된 청구범위에서 정의되는 발명은 전술한 특정 특징들 또는 동작들로 반드시 한정되지는 않는다는 것을 이해해야 한다. 오히려, 전술한 특정 특징들 및 동작들은 청구범위를 구현하는 예시적인 형태들로서 개시된다.

Claims (20)

  1. 컴퓨팅 장치의 적어도 하나의 프로세서와,
    상기 컴퓨팅 장치의 메모리와,
    상기 메모리 내에 로딩되어, 상기 적어도 하나의 프로세서로 하여금,
    브라우저에서의 선택을 상기 선택에 대응하는 문서 객체 모델(DOM)의 일부에 맵핑하고―상기 DOM은 하이퍼텍스트 전송 프로토콜(HTTP) 요청에 응답하여 웹 서버로부터 획득된 인출된 파일(fetched file)을 표현하고, 상기 선택은 상기 인출된 파일로부터의 콘텐츠와 연관되고, 상기 인출된 파일은 상기 DOM과 상이함―,
    상기 인출된 파일의 콘텐츠를 생성하는 소스 파일 내의 위치 범위에 상기 DOM의 일부를 맵핑하고,
    상기 소스 파일에 대해 수행된 변경에 기초하여 상기 웹 서버로부터 업데이트된 콘텐츠를 수신하고,
    상기 브라우저에서의 선택을 상기 변경된 소스 파일과 동시에 표시하는
    적어도 하나의 모듈을 포함하되,
    상기 표시된 브라우저에서의 선택은 상기 업데이트된 콘텐츠를 포함하는
    시스템.
  2. 제1항에 있어서,
    상기 적어도 하나의 프로세서는 상기 인출된 파일 내의 위치 범위를 특정 소스 파일 내의 특정 위치 범위에 맵핑하는 메타데이터를 수신하고, 상기 메타데이터는 상기 특정 소스 파일에 대한 경로 및 상기 특정 소스 파일 내의 시작 위치를 포함하는
    시스템.
  3. 제2항에 있어서,
    상기 적어도 하나의 모듈은 상기 수신된 메타데이터로부터 맵핑 테이블을 생성하고, 상기 맵핑 테이블은 상기 인출된 파일 내의 위치 범위를 소스 파일 내의 위치 범위에 맵핑하는
    시스템.
  4. 제1항에 있어서,
    상기 적어도 하나의 모듈은 또한,
    상기 DOM에서의 선택을 동적 브라우저 파일 블록 리스트 내의 위치 범위에 맵핑하고,
    상기 동적 브라우저 파일 블록 리스트 내의 위치 범위를 인출된 파일 블록 리스트 내의 위치 범위에 맵핑하고,
    상기 인출된 파일 블록 리스트 내의 위치 범위를 상기 DOM에서의 선택을 생성하는 소스 파일 내의 대응하는 위치 범위에 맵핑하는
    시스템.
  5. 제 1 항에 있어서,
    문서 객체 모델(DOM) 툴은 브라우저 페이지를 표현하는 트리 데이터 구조의 가시화를 제공하고, 상기 브라우저 페이지는 상기 브라우저에 표시되는
    시스템.
  6. 제 1 항에 있어서,
    캐스케이드 스타일 시트(Cascading Style Sheet) 도구는 선택된 스타일 특성을 상기 특성이 유래된(originated) 대응하는 소스 파일에 역맵핑하는
    시스템.
  7. 제 6 항에 있어서,
    상기 선택된 스타일 특성에 대한 변경은 상기 대응하는 소스 파일을 변경함으로써 자동으로 영속화(automatically made permanent)시킬 수 있는
    시스템.
  8. 소프트웨어 개발 컴퓨터의 프로세서에 의해 웹 서버로부터 브라우저에서의 사용자 선택을 수신하는 단계와,
    상기 브라우저에서의 선택을 상기 선택을 표현하는 문서 객체 모델(DOM)의 일부에 맵핑하는 단계와,
    인출된 파일 내의 위치 범위에 상기 DOM의 일부를 맵핑하는 단계―상기 인출된 파일은 하이퍼텍스트 전송 프로토콜(HTTP) 요청에 응답하여 웹 서버로부터 수신된 파일을 포함하고, 상기 DOM은 상기 인출된 파일을 표현하고, 상기 DOM은 상기 인출된 파일과 상이함―와,
    상기 인출된 파일 내의 위치 범위를 상기 브라우저에서의 사용자 선택을 생성하는 소스 파일 내의 위치 범위에 맵핑하는 단계와,
    변경된 소스 파일에 기초하여 상기 웹 서버로부터 업데이트된 콘텐츠를 수신하는 단계와,
    상기 브라우저에서의 선택을 상기 변경된 소스 파일 내의 위치 범위와 동시에 표시하는 단계를 포함하되,
    상기 표시된 브라우저에서의 선택은 상기 업데이트된 콘텐츠를 포함하는
    를 포함하는 방법.
  9. 제8항에 있어서,
    상기 인출된 파일 내의 위치 범위를 상기 인출된 파일 내의 상기 위치 범위에서 콘텐츠가 유래한(originated) 소스 파일 내의 대응하는 위치 범위에 맵핑하는 메타데이터를 수신하는 단계를 더 포함하고, 상기 메타데이터는 상기 소스 파일에 대한 경로 및 상기 인출된 파일 내의 상기 위치 범위에 대응하는 상기 소스 파일 내의 상기 대응하는 위치 범위를 더 포함하는
    방법.
  10. 제9항에 있어서,
    상기 소프트웨어 개발 컴퓨터의 메모리 내에 맵핑 테이블을 생성하는 단계를 더 포함하고, 상기 맵핑 테이블은 상기 인출된 파일과 상기 DOM 사이에 연관성을 생성함으로써 상기 브라우저 내의 콘텐츠를 상기 인출된 파일 내의 상기 대응하는 콘텐츠에 맵핑하는
    방법.
  11. 제10항에 있어서,
    서버 콘텐츠를 생성하기 위한 요청을 상기 웹 서버로 전송함으로써 상기 서버 콘텐츠를 생성하고, 상기 서버 콘텐츠를 상기 브라우저 내에 표시하는 단계를 더 포함하는
    방법.
  12. 제8항에 있어서,
    브라우저 페이지를 표현하는 트리 데이터 구조를 표시하는 단계를 더 포함하고, 상기 브라우저 페이지는 상기 브라우저 내에 표시되는
    방법.
  13. 제8항에 있어서,
    캐스케이드 스타일 시트 스타일 특성을 포함하는 선택을 상기 캐스케이드 스타일 시트 스타일 특성이 유래된 소스 파일에 역맵핑하는 단계를 더 포함하는
    방법.
  14. 제9항에 있어서,
    상기 인출된 파일 내의 위치 범위를 상기 소스 파일 내의 대응하는 위치 범위에 맵핑하는 맵핑 테이블을 생성하는 단계―상기 소스 파일로부터 상기 인출된 파일 내의 위치 범위에서의 콘텐츠가 생성됨―와,
    브라우저 표시 및 대응하는 소스 코드를 표시하는 단계를 더 포함하는
    방법.
  15. 적어도 하나의 프로세서 및 메모리를 포함하는 디바이스로서,
    상기 적어도 하나의 프로세서는,
    브라우저에서의 선택을 수신하고,
    브라우저에서의 선택을 문서 객체 모델(DOM) 블록 리스트 내의 위치 범위에 맵핑하고,
    상기 DOM 블록 리스트 내의 위치 범위를 인출된 파일 블록 리스트 내의 위치 범위에 맵핑하고―인출된 파일은 하이퍼텍스트 전송 프로토콜(HTTP) 요청에 응답하여 웹 서버로부터 수신된 파일을 포함하고, 상기 DOM은 상기 인출된 파일과 상이함―,
    상기 브라우저에서의 선택을 생성하는 소스 파일 내의 대응하는 위치 범위에 상기 인출된 파일 블록 리스트 내의 위치 범위를 맵핑하고,
    소스 파일에 대해 수행된 하나 이상의 사용자 변경을 처리하는 상기 웹 서버에 기초하여 상기 웹 서버로부터 업데이트된 콘텐츠를 수신하고,
    상기 브라우저에서의 선택 및 상기 소스 파일을 동시에 표시하도록 구성되고,
    상기 표시된 선택은 상기 업데이트된 콘텐츠를 포함하는
    디바이스.
  16. 제 15 항에 있어서,
    상기 적어도 하나의 프로세서는,
    상기 웹 서버의 생산에 대한 왕복(round trip)을 수행함으로써 상기 웹 서버 응답의 생산을 포함하는 콘텐츠를 상기 브라우저 내에 렌더링하도록 더 구성되는
    디바이스.
  17. 제 15 항에 있어서,
    상기 적어도 하나의 프로세서는,
    상기 인출된 파일을 웹 서버로부터 수신하도록 더 구성되고, 메타데이터와 연관된 상기 인출된 파일은 상기 인출된 파일 내의 출력 위치 범위가 유래되는 소스 파일 내의 위치 범위로 상기 인출된 파일 내의 출력 위치 범위를 맵핑하는
    디바이스.
  18. 제 17 항에 있어서,
    상기 적어도 하나의 프로세서는,
    캐스케이드 스타일 시트 스타일 특성을 포함하는 선택은 상기 캐스케이드 스타일 시트 스타일 특성이 유래된 소스 파일에 역맵핑하도록 더 구성되는
    디바이스.
  19. 제 16 항에 있어서,
    상기 적어도 하나의 프로세서는,
    상기 DOM으로부터 생성된 제 1 블록 리스트 및 상기 인출된 파일로부터 생성된 제 2 블록 리스트의 식별자들을 매칭시킴으로써 상기 DOM 블록 리스트 내의 위치 범위에 상기 DOM에서의 선택을 맵핑하는 연관을 생성하도록 더 구성되는
    디바이스.
  20. 제 15 항에 있어서,
    상기 적어도 하나의 프로세서는,
    브라우저 페이지를 표현하는 트리 데이터 구조의 가시화를 제공하도록 더 구성되고, 상기 브라우저 페이지는 브라우저에 표시되는
    디바이스.
KR1020137033204A 2011-06-16 2012-06-05 통합 개발 환경에서의 라이브 브라우저 툴 제공 기법 KR101908162B1 (ko)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
US13/161,529 US9753699B2 (en) 2011-06-16 2011-06-16 Live browser tooling in an integrated development environment
US13/161,529 2011-06-16
PCT/US2012/040956 WO2012173829A2 (en) 2011-06-16 2012-06-05 Live browser tooling in an integrated development environment

Publications (2)

Publication Number Publication Date
KR20140038459A KR20140038459A (ko) 2014-03-28
KR101908162B1 true KR101908162B1 (ko) 2018-10-15

Family

ID=47354804

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020137033204A KR101908162B1 (ko) 2011-06-16 2012-06-05 통합 개발 환경에서의 라이브 브라우저 툴 제공 기법

Country Status (6)

Country Link
US (1) US9753699B2 (ko)
EP (1) EP2721513B1 (ko)
JP (1) JP5947888B2 (ko)
KR (1) KR101908162B1 (ko)
CN (1) CN103597469B (ko)
WO (1) WO2012173829A2 (ko)

Families Citing this family (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8745027B1 (en) * 2011-04-11 2014-06-03 Google Inc. Jslayout cascading style sheets optimization
US9460224B2 (en) 2011-06-16 2016-10-04 Microsoft Technology Licensing Llc. Selection mapping between fetched files and source files
US9563714B2 (en) 2011-06-16 2017-02-07 Microsoft Technology Licensing Llc. Mapping selections between a browser and the original file fetched from a web server
US20130185623A1 (en) * 2012-01-12 2013-07-18 International Business Machines Corporation Instructing web clients to ignore scripts in specified portions of web pages
CN102662737B (zh) * 2012-03-14 2014-06-11 优视科技有限公司 扩展程序的调用方法及装置
US10530894B2 (en) * 2012-09-17 2020-01-07 Exaptive, Inc. Combinatorial application framework for interoperability and repurposing of code components
US9805114B2 (en) 2013-09-30 2017-10-31 Microsoft Technology Licensing, Llc Composable selection model through reusable component
AU2015258733B2 (en) * 2014-05-14 2020-03-12 Pagecloud Inc. Methods and systems for web content generation
US9646103B2 (en) * 2014-07-10 2017-05-09 MyMojo Corporation Client-side template engine and method for constructing a nested DOM module for a website
US9952915B2 (en) 2014-11-06 2018-04-24 Microsoft Technology Licensing, Llc Event processing development environment
US10769351B2 (en) * 2015-05-08 2020-09-08 Citrix Systems, Inc. Rendering based on a document object model
US9678724B2 (en) * 2015-05-29 2017-06-13 Intentional Software Corporation System and method for combining text editing and tree encoding for computer programs
CN107704479B (zh) * 2017-02-08 2020-06-30 深圳壹账通智能科技有限公司 文件生成方法和装置
KR101809460B1 (ko) * 2017-05-15 2017-12-15 주식회사 한글과컴퓨터 웹 문서 편집툴에서 지원하는 스타일 속성에 따라 웹 문서에 대한 외부 콘텐츠의 붙여넣기 처리가 가능한 클라이언트 단말 장치 및 그 동작 방법
US10795670B2 (en) * 2018-12-20 2020-10-06 Roblox Corporation Developer collaboration control system
CN110085256B (zh) * 2019-03-21 2021-11-19 视联动力信息技术股份有限公司 信息处理方法和装置
KR20210057306A (ko) 2019-11-12 2021-05-21 주식회사 모카앤제이에스 블록 에디터 기반 문서 편집 서비스 제공 방법, 그를 수행하기 위한 서버 및 컴퓨터 프로그램
KR20220052134A (ko) 2020-10-20 2022-04-27 주식회사 모카앤제이에스 블록 에디터 기반의 문서 편집을 위한 연관 블록 연결 방법, 그를 수행하기 위한 서버 및 컴퓨터 프로그램
KR20220052135A (ko) 2020-10-20 2022-04-27 주식회사 모카앤제이에스 블록 에디터 기반의 문서 편집을 위한 임포트 블록 삽입 방법, 그를 수행하기 위한 서버 및 컴퓨터 프로그램
US11409432B2 (en) * 2020-12-23 2022-08-09 Microsoft Technology Licensing, Llc Pen command for ink editing

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7325191B2 (en) 2003-12-08 2008-01-29 Microsoft Corporation Preservation of source code formatting
US20080235671A1 (en) 2007-03-20 2008-09-25 David Kellogg Injecting content into third party documents for document processing

Family Cites Families (80)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5339433A (en) 1992-11-19 1994-08-16 Borland International, Inc. Symbol browsing in an object-oriented development system
US5774670A (en) 1995-10-06 1998-06-30 Netscape Communications Corporation Persistent client state in a hypertext transfer protocol based client-server system
US5740430A (en) 1995-11-06 1998-04-14 C/Net, Inc. Method and apparatus for server-independent caching of dynamically-generated customized pages
US6393569B1 (en) 1996-12-18 2002-05-21 Alexander S. Orenshteyn Secured system for accessing application services from a remote station
US6038573A (en) 1997-04-04 2000-03-14 Avid Technology, Inc. News story markup language and system and process for editing and processing documents
US6317885B1 (en) 1997-06-26 2001-11-13 Microsoft Corporation Interactive entertainment and information system using television set-top box
US6178433B1 (en) 1997-07-15 2001-01-23 International Business Machines Corporation Method and system for generating materials for presentation on a non-frame capable web browser
US5964836A (en) 1997-09-11 1999-10-12 International Business Machines Corporation Apparatus, methods and computer program products for managing web-page-embedded sessions with a host-based application
US6023764A (en) 1997-10-20 2000-02-08 International Business Machines Corporation Method and apparatus for providing security certificate management for Java Applets
US6092100A (en) 1997-11-21 2000-07-18 International Business Machines Corporation Method for intelligently resolving entry of an incorrect uniform resource locator (URL)
US6247020B1 (en) * 1997-12-17 2001-06-12 Borland Software Corporation Development system with application browser user interface
US6175832B1 (en) 1998-05-11 2001-01-16 International Business Machines Corporation Method, system and program product for establishing a data reporting and display communication over a network
US6182097B1 (en) 1998-05-21 2001-01-30 Lucent Technologies Inc. Method for characterizing and visualizing patterns of usage of a web site by network users
US6205432B1 (en) 1998-06-05 2001-03-20 Creative Internet Concepts, Llc Background advertising system
US6083276A (en) 1998-06-11 2000-07-04 Corel, Inc. Creating and configuring component-based applications using a text-based descriptive attribute grammar
WO2000004483A2 (en) 1998-07-15 2000-01-27 Imation Corp. Hierarchical data storage management
US6502239B2 (en) * 1998-11-12 2002-12-31 Computer Associates Think, Inc Method and apparatus for round-trip software engineering
US6629127B1 (en) 1999-07-26 2003-09-30 Microsoft Corporation Methods and systems for processing HTTP requests
US6609246B1 (en) 1999-12-07 2003-08-19 Bull Hn Information Systems Inc. Integrated development environment for high speed transaction processing WWW applications on heterogeneous computer systems
US6643652B2 (en) 2000-01-14 2003-11-04 Saba Software, Inc. Method and apparatus for managing data exchange among systems in a network
US6990653B1 (en) 2000-05-18 2006-01-24 Microsoft Corporation Server-side code generation from a dynamic web page content file
WO2001091352A2 (en) * 2000-05-24 2001-11-29 Nttx Corporation Graphical weg page editor
WO2001095123A1 (en) 2000-06-05 2001-12-13 Altoweb Systems, Inc. System and method for accessing, organizing, and presenting data
CA2322594C (en) * 2000-10-06 2005-01-11 Ibm Canada Limited-Ibm Canada Limitee System and method for managing web page components
US7191405B1 (en) * 2000-11-22 2007-03-13 Adobe Systems Incorporated System and method for editing information
US7155478B2 (en) 2001-10-03 2006-12-26 International Business Machines Corporation Selectively handling data processing requests in a computer communications network
US8104017B2 (en) * 2001-10-25 2012-01-24 The Mathworks, Inc. Traceability in a modeling environment
EP1552385B1 (en) 2002-06-12 2008-10-15 Telelogic North America Inc. Providing dynamic model-code associativity
CA2391719A1 (en) 2002-06-26 2003-12-26 Ibm Canada Limited-Ibm Canada Limitee Editing files of remote systems using an integrated development environment
US8032597B2 (en) 2002-09-18 2011-10-04 Advenix, Corp. Enhancement of e-mail client user interfaces and e-mail message formats
US7316003B1 (en) * 2002-12-18 2008-01-01 Oracle International Corp. System and method for developing a dynamic web page
US7441195B2 (en) * 2003-03-04 2008-10-21 Omniture, Inc. Associating website clicks with links on a web page
US7395312B2 (en) 2003-04-08 2008-07-01 Microsoft Corporation Integrating online community and program development environments
US7143115B2 (en) 2003-04-15 2006-11-28 Pocket Soft, Inc. Method and apparatus for finding differences between two computer files efficiently in linear time and for using these differences to update computer files
EP1661396A2 (en) 2003-08-08 2006-05-31 Maven Networks, Inc. System and method of integrating video content with interactive elements
US7543268B2 (en) 2003-09-30 2009-06-02 Sap Ag Development environment for developing applications using a metamodel and a metadata API
US7503035B2 (en) 2003-11-25 2009-03-10 Software Analysis And Forensic Engineering Corp. Software tool for detecting plagiarism in computer source code
US7328217B2 (en) 2003-11-26 2008-02-05 Symantec Operating Corporation System and method for detecting and storing file identity change information within a file system
US20050198565A1 (en) 2004-02-20 2005-09-08 Mcchrystal Peter S. Method and apparatus for automatic update ad notification of documents and document components stored in a document repository
US7246134B1 (en) 2004-03-04 2007-07-17 Sun Microsystems, Inc. System and methods for tag library generation
US20060039348A1 (en) 2004-08-20 2006-02-23 Nokia Corporation System, device and method for data transfer
US7475391B2 (en) 2004-10-07 2009-01-06 International Business Machines Corporation System and method for revealing remote object status in an integrated development environment
WO2006043274A2 (en) * 2004-10-22 2006-04-27 Flash Networks Ltd Method and system for accelerating downloading of web pages.
US7890919B1 (en) * 2004-10-27 2011-02-15 Adobe Systems Incorporated Automatic component update and integration
US7440967B2 (en) 2004-11-10 2008-10-21 Xerox Corporation System and method for transforming legacy documents into XML documents
JPWO2006085455A1 (ja) * 2005-02-14 2008-06-26 株式会社ジャストシステム 文書処理装置および文書処理方法
US7480897B2 (en) * 2005-03-10 2009-01-20 International Business Machines Corporation Method and system for managing development objects for computer program code
US7516445B2 (en) * 2005-06-30 2009-04-07 Microsoft Corporation Locating source code when stopping in a debugger
US7661064B2 (en) 2006-03-06 2010-02-09 Microsoft Corporation Displaying text intraline diffing output
WO2008017044A1 (en) * 2006-08-02 2008-02-07 Watt Systems Technologies, Inc. Object oriented system and method of graphically displaying and analyzing complex systems
US20080033996A1 (en) * 2006-08-03 2008-02-07 Anandsudhakar Kesari Techniques for approximating the visual layout of a web page and determining the portion of the page containing the significant content
US7861213B2 (en) 2006-09-05 2010-12-28 Oracle International Corporation Mechanism for developing AJax applications using java swing framework and method for using the same
US8578334B2 (en) 2006-12-04 2013-11-05 Microsoft Corporation Dynamic language-based integrated development environment
US7694282B2 (en) 2006-12-12 2010-04-06 Arkhipov Mikhail E Mapping breakpoints between web based documents
US8276118B2 (en) 2007-03-01 2012-09-25 International Business Machines Corporation Depicting changes to structures in an integrated development environment
US8499237B2 (en) * 2007-03-29 2013-07-30 Hiconversion, Inc. Method and apparatus for application enabling of websites
US7941755B2 (en) * 2007-04-19 2011-05-10 Art Technology Group, Inc. Method and apparatus for web page co-browsing
US8392880B2 (en) 2007-04-27 2013-03-05 International Business Machines Corporation Rapid application development for database-aware applications
US8392890B2 (en) * 2007-10-15 2013-03-05 Software Research, Inc. Method and system for testing websites
WO2008157322A1 (en) * 2007-06-13 2008-12-24 Quattro Wireless, Inc. Displaying content on a mobile device
US7779161B2 (en) * 2007-07-24 2010-08-17 Hiconversion, Inc. Method and apparatus for general virtual application enabling of websites
KR100958786B1 (ko) * 2007-10-08 2010-05-18 엔에이치엔(주) 웹문서 편집 방법 및 장치
US8719451B1 (en) * 2007-11-23 2014-05-06 Appcelerator, Inc. System and method for on-the-fly, post-processing document object model manipulation
US20140006913A1 (en) * 2007-12-21 2014-01-02 Adobe Systems Incorporated Visual template extraction
US8255793B2 (en) 2008-01-08 2012-08-28 Yahoo! Inc. Automatic visual segmentation of webpages
US8181167B2 (en) * 2008-01-09 2012-05-15 Kan Zhao Method and system for presenting and analyzing software source code through intermediate representation
US8887089B2 (en) 2008-02-12 2014-11-11 Oracle International Corporation System and method for generating a file peek ahead user interface
US8713520B2 (en) * 2008-04-04 2014-04-29 Adobe Systems Incorporated Web development environment that enables a developer to interact with run-time output presentation of a page
US8356277B1 (en) * 2008-04-04 2013-01-15 Adobe Systems Incorporated System and method for freezing operation of dynamic code of a run-time web page
JP5389902B2 (ja) 2008-04-28 2014-01-15 セールスフォース ドット コム インコーポレイティッド ウェブサイト及びそのコンテンツの作成及び管理のためのオブジェクト指向のシステム
US8549064B2 (en) 2008-08-12 2013-10-01 Hewlett-Packard Development Company, L.P. System and method for data management
US20100162096A1 (en) * 2008-12-23 2010-06-24 Micorsoft Corpration Techniques for Utilizing Dynamic Components with Wikis
US20100251143A1 (en) * 2009-03-27 2010-09-30 The Ransom Group, Inc. Method, system and computer program for creating and editing a website
US20100293524A1 (en) 2009-05-12 2010-11-18 International Business Machines, Corporation Development environment for managing database aware software projects
US8799852B2 (en) * 2009-05-18 2014-08-05 National Instruments Corporation Providing online graphical data flow web application tools or services for charge
US8924943B2 (en) 2009-07-17 2014-12-30 Ebay Inc. Browser emulator system
CN101645009A (zh) 2009-08-25 2010-02-10 中国科学院计算技术研究所 Web服务集成开发系统和方法
CN102270116A (zh) 2010-06-07 2011-12-07 南通智普网络科技有限公司 Web IDE在线开发平台
US20120101929A1 (en) * 2010-08-26 2012-04-26 Massively Parallel Technologies, Inc. Parallel processing development environment and associated methods
US8843892B2 (en) * 2010-12-03 2014-09-23 Adobe Systems Incorporated Visual representations of code in application development environments

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7325191B2 (en) 2003-12-08 2008-01-29 Microsoft Corporation Preservation of source code formatting
US20080235671A1 (en) 2007-03-20 2008-09-25 David Kellogg Injecting content into third party documents for document processing

Also Published As

Publication number Publication date
EP2721513B1 (en) 2020-10-07
CN103597469A (zh) 2014-02-19
JP5947888B2 (ja) 2016-07-06
WO2012173829A2 (en) 2012-12-20
KR20140038459A (ko) 2014-03-28
EP2721513A2 (en) 2014-04-23
CN103597469B (zh) 2018-02-02
JP2014523567A (ja) 2014-09-11
WO2012173829A3 (en) 2013-05-23
US20120324422A1 (en) 2012-12-20
US9753699B2 (en) 2017-09-05
EP2721513A4 (en) 2014-12-31

Similar Documents

Publication Publication Date Title
KR101908162B1 (ko) 통합 개발 환경에서의 라이브 브라우저 툴 제공 기법
US10594769B2 (en) Selection mapping between fetched files and source files
US10447764B2 (en) Mapping selections between a browser and the original fetched file from a web server
JP5821678B2 (ja) ウェブ・アプリケーションのブラウザに依存しない自動互換性チェックのためのウェブ・サービス
US8065667B2 (en) Injecting content into third party documents for document processing
US7694282B2 (en) Mapping breakpoints between web based documents
US20040090458A1 (en) Method and apparatus for previewing GUI design and providing screen-to-source association
JP5856139B2 (ja) 仮想ドキュメントを用いたインデックス付与と検索
US11907734B2 (en) Dynamic linking of content elements to development tool resources
JP2013506175A (ja) 統一リソース識別子（ｕｒｉ）による、アプリケーション状態情報の管理
KR20080053293A (ko) 클라이언트 스크립트 웹 페이지에 대한 서버측 초기 콘텐츠렌더링
CN112100550A (zh) 一种页面构建方法和装置
US8918766B2 (en) Analysis of propagated information using annotated forests
US11119896B1 (en) Browser based visual debugging
JP2017504129A (ja) ウェブブラウザにおいて表わされる状態表現の構築
CN111831384A (zh) 语言切换方法和装置、设备及存储介质
CN110334302B (zh) 复杂Web应用前端运行时分析方法
US10198408B1 (en) System and method for converting and importing web site content
JP2010282587A (ja) マッシュアッププログラム、マッシュアップ装置及びマッシュアップ方法
CN116166866B (zh) 一种对spa应用进行seo的优化方法、装置、终端及存储介质
RU2651161C1 (ru) Способ подготовки документов на языках разметки при реализации пользовательского интерфейса для работы с данными информационной системы
KR100603248B1 (ko) 가상 uri를 이용한 웹어플리케이션 구동 및 웹 매크로 서비스의 구현 방법
CN116820985A (zh) 一种检测注解配置错误的方法和装置及设备
League MetaOCaml server pages: Web publishing as staged computation

Legal Events

Date Code Title Description
N231 Notification of change of applicant
E701 Decision to grant or registration of patent right
GRNT Written decision to grant