UI개발 Debugging 꿀팁

@kjy2143 / SK planet

CSS Sprites

with gulp

sprite.css

.sp_ico_sns_facebook {
  display: inline-block;
  background-image: url(/MW/img/common/sprites/ico_sns/sp_ico_sns.png);
  background-position: 0px 0px;
  width: 54px;
  height: 55px;
  background-size: 231px 175px;
}

gulp-sprites

https://github.com/poohding/gulp-sprites

Spinner

https://github.com/poohding/spinner.git​

Spinner

  • Sass (autoprefixer)
  • CSS Sprites
  • MVC Design Pattern
  • Vanilla JavaScript
  • JS Bundling(webpack)

Find Event Listeners

Format

Source map

Source map

Quick File Swiching

Search within source code

Go To Line

Chrome DevTools

Network

Capture Screenshots

Throttling the Network

Filter

Chrome DevTools

Animation

Easing Preview

ceaser

Chrome DevTools

Workspace

Search All Files

Search All Files

Fiddler

파일 바꿔치기

http://www.telerik.com/fiddler

Mobile Debugging

Mobile Debugging

Tools > Fiddler Options > Connections

Mobile Config

  • HTTP 프록시 > 수동
  • 피들러 설정한 PC IP
  • 피들러에서 설정한 port 번호

THANK YOU.

UI Develop Debugging Tips

By bowaxwing

UI Develop Debugging Tips

UI개발 Debugging Tips

  • 204

More from bowaxwing