IE JavaScript Debugging & Development

IE에서의 웹 개발은 FireFox에 비하면 아직(2008년)까지는 어려운 편이다.

제공되는 개발 도구들이 별로 좋지 못하고, 특히 JavaScript 디버깅은 매우 어려운 편이다. 현재 사용할 만한 IE 용 웹 개발 도구들을 정리해본다.

특히 IE에서의 JavaScript 디버깅용으로는 MSD와 Companion.JS 조합이 현재로서는 가장 이상적인 조합인 것 같다.

 

• Microsoft Script Editor : 이하 MSE. 가장 좋다고 알려져 있으나, MS Office XP/2003 에만 포함돼 있다. (즉, 상용이다)
• Microsoft Script Debugger : 이하 MSD. 무료 디버거로 독립적으로 사용하면 디버거 자체의 버그로 IE를 다운시킨다. 하지만 Companion.JS와 함께 사용하면 좋다~
• Companion.JS : IE용 FireBug의 Console 기능만 가져왔다고 보면 된다. 물론... 기능은 무쟈게 딸린다. 하지만 MSD와 함께 사용하면 오류가 난 부분을 정확하게 찝어준다.
• IE Deveoper Toolbar : IE용 Developer Toolbar로 DOM구조, JavaScript/Cookie/CSS 등을 설정할 수 있다. Script보다는 HTML/DOM 구조 관련 작업에 사용한다.

• DebugBar : DOM 구조 분석에 있어서 IE Dev Toolbar보다 훨씬 앞선다. 다양한 기능을 IE와 같은 창에서 편리하게 사용할 수 있다. 그러나 FireBug에 비하면 많이 딸린다....

  • HTTP 전송 데이터 분석,
  • JavaScript 소스 구조별로 보기
  • HTTP 전송 데이터 분석
  • 실시간 HTML Validation
  • Javascript 바로 실행해보기 등이 가능하다.
• ieHTTPHeader : IE가 주고 받는 헤더를 확인할 수 있다. IE내부에 붙는 형태이다. 헤더 뿐만 아니라 주고 받는 모든 데이터를 보려면 Fiddler 2가 쵝오!

• Fiddler 2 : IE 뿐만 아니라 어느 브라우저에서라도 사용할 수 있느 Proxy 기반의 브라우져 데이터 전송 분석도구이다.

  • 헤더 뿐만아니라 바디까지 모두 분석해준다.
  • 기능상으로 보면 HTTP 데이터 분석에서는 최고의 무료 툴이다.
  • .NET을 깔아야만 한다.
  • IE는 Fiddler를 실행하면 자동으로 Proxy 설정이 바뀌고, Fiddler를 종료하면 다시 Proxy 설정이 복구된다. 다른 브라우저는 직접 Proxy 설정을 변경하면 된다.

 

JavaScript Debugging

IE에서 웹 개발하면서 제일 짜증 나는 점은, JavaScript 오류가 발생했을 때, 도무지 어디에서 에러가 발생한 것인지 친절하게 알려주질 않는 다는 것이다. 그래서 IE에게는 별로 기대할 것도 없다보니, 에러가 어디서 났다는 것만 정확히 알려주는 것 만으로도 고맙기 그지 없는 상황이 되는데, 바로 "에러난 정확한 위치"를 알려줄 수 있는 것이 "MSD"와 "Companion.JS"의 조합이다.

실제로 IE에서 가장 좋은 스크립트 디버거는 MSE 이지만, 상용이라 배재한다.

 

MSD의 경우 약간의 문제가 있는데, 이걸 제대로 사용하려고 들면, IE를 수시로 다운시켜서 뭘 제대로 할 수가 없다는 점이다.

헌데, MSD + Companion.JS 조합으로 사용하면 별다른 문제 없이 오류 위치를 정확히 집어준다. (이 정도 기능외에는 별로 기대 할 게 없긴 하지만 이것만으로도 너무나 감사하다.)

 

먼저 MSD를 설치한다.

다시, Companion.JS를 설치한다.

MSD가 없으면 Companion.JS는 작동하지 않는다.

 

IE 설정에서 고급에서 "스크립트 디버깅 사용 안 함" 옵션의 체크를 없앤다.

 

이제 도구 -> 도구모음 -> 탐색 창 -> Companion.JS 에 체크를 해주면 화면 아래에 Companion.JS 창이 생긴다.

Source 탭에서는 HTML 문법 오류, JavaScript 오류 위치 검사 등을 할 수 있다.

여기서 Console 탭을 통해서 JavaScript를 임의로 실행 해 볼 수 있다.

아래는 일부러 오류를 내고 오류 위치 알려주는 것을 확인한 모습. js 파일이 여러개로 분리돼 있어도 정확히 집어준다.

 

IE에서 JavaScript 개발 때문에 고통받고 있으니, 부디 더 좋은 방법이 있다면, 기탄없이 조언 부탁드립니다.

 

 

 

Hibernate 테이블 자동생성 Ant Script

• 아래 과정과 상관없이, hibernate.hbm2ddl.auto 프라퍼티를 true로 지정하면, 스키마가 바뀌고, Hibernate 설정이 다시 로딩 될 때 마다 스키마를 재구성해준다. 테스트 환경에서는 이 속성을 사용하는 것이 편하다.
• Hibernate 단독 사용시, 테이블을 자동으로 생성해주는 Hibernate Java Code는 다음과 같다.

1. package testutils;

2. import org.hibernate.cfg.Configuration;

3. import org.hibernate.tool.hbm2ddl.SchemaExport;

4. public class HibernateTableSchemaCreation {

5.     public static void main(String[] args) {

6.         Configuration cfg = new Configuration().configure("hibernate.cfg.xml");

7.         SchemaExport schemaExport = new SchemaExport(cfg);

8. schemaExport.create(true, true);

9.         System.out.println("테이블 스키마를 리셋하였습니다.");

10.     }

11. }

• Spring 2.0에 연동해서 사용할 때는 hibernate.cfg.xml 파일이 없기 때문에 다음과 같이 Spring에서 제공해주는 기능을 이용한다. LocalSessionFactoryBean의 id가 "sessionFactory"로 지정돼 있을 때를 가정했다. 아래와 같이 Bean을 얻어올 때 앞에 & 기호가 있어야만 LocalSessionFactoryBean의 객체를 가져올 수 있다.

1. package testutils;

2. import org.springframework.context.ApplicationContext;

3. import org.springframework.context.support.FileSystemXmlApplicationContext;

4. import org.springframework.orm.hibernate3.LocalSessionFactoryBean;

5. public class HibernateTableSchemaCreation {

6.     public static void main(String[] args) {

7.  

8.         String [] paths = { "WebContent/WEB-INF/applicationContext-*.xml" };

9.         ApplicationContext ctx = new FileSystemXmlApplicationContext(paths);

10.         LocalSessionFactoryBean lsfb = (LocalSessionFactoryBean)ctx.getBean("&sessionFactory");

11.         lsfb.dropDatabaseSchema();
            lsfb.createDatabaseSchema();

12.         System.out.println("테이블 스키마를 리셋하였습니다.");

13.     }

14. }

 

위 클래스를 Ant에 등록해서 사용할 수 있다.

1.     <target name="reset-schema">
           <input
               message="DB데이터가 모두 초기화 됩니다. 수행하시겠습니까? (yes/no)"
               addproperty="do.proceed"/>
   
           <fail message="취소하셨습니다."> <!-- yes 가 아닐경우 취소 -->
               <condition>
                   <not>
                       <equals arg1="yes" arg2="${do.proceed}" />
                   </not>
               </condition>
           </fail>
          
           <java
               classname="testutils.HibernateTableSchemaCreation"
               classpathref="project.classpath" /> <!-- 여기에 Hibernate3.jar 등이 들어있어야한다. -->
       </target>

 

• 테이블 생성 스크립트만 Ant로 얻어오는 방법도 있다. 원칙적으로는 위 Java 클래스가 해주는 직접적인 DB 테이블 수정도 가능하다고 하는데, 나는 자꾸 NullPointerException이 발생해서 Script를 가져오는 것까지만으로 사용한다.

1.     <taskdef name="schemaexport"
           classname="org.hibernate.tool.hbm2ddl.SchemaExportTask"
           classpathref="project.classpath" />
2.     <target name="db-create-schema-ddl" depends="prepare">
           <schemaexport config="${src.dir}/hibernate.cfg.xml"
               quiet="no" text="yes" drop="no" create="yes"
               delimiter=";" output="${build.dir}/db-create.ddl">
           </schemaexport>
       </target>
   
       <target name="db-drop-schema-ddl" depends="prepare">
           <schemaexport config="${src.dir}/hibernate.cfg.xml"
               quiet="no" text="yes" drop="yes" create="no"
               delimiter=";" output="${build.dir}/db-drop.ddl">
           </schemaexport>

 

Spring + Hibernate 에서 스키마 DDL 출력

1.         String[] paths = { "WebContent/WEB-INF/applicationContext-*.xml" };
           ApplicationContext ctx = new FileSystemXmlApplicationContext(paths);
           LocalSessionFactoryBean lsfb = (LocalSessionFactoryBean) ctx
                   .getBean("&sessionFactory");
           String[] creationSchemas = lsfb.getConfiguration()
                   .generateSchemaCreationScript(
                           Dialect.getDialect(lsfb.getConfiguration()
                                   .getProperties()));
   
           for (String schema : creationSchemas) {
               System.out.println(schema);
           }