Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Look Deeply into Your App with Augury

Avatar for Vanessa Yuen Vanessa Yuen
July 01, 2016
Technology
0
100

Look Deeply into Your App with Augury

Presented at Angular Camp 2016 at Barcelona, Spain.

Avatar for Vanessa Yuen

Vanessa Yuen

July 01, 2016
Tweet

More Decks by Vanessa Yuen

See All by Vanessa Yuen
Generative Art with p5.js
Avatar for Vanessa Yuen vanessayuenn
4
1.1k

Other Decks in Technology

See All in Technology
自作JSエンジンに推しプロポーザルを実装したい！
Avatar for Saji sajikix
1
160
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
Avatar for Yuki Miida miichan
2
170
2025年にHCP Vaultを学び直して見えた景色 / Lessons and New Perspectives from Relearning HCP Vault in 2025
Avatar for AEON aeonpeople
0
220
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
Avatar for oracle4engineer oracle4engineer
PRO
4
10k
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
Avatar for wanda ganota
1
170
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
Avatar for AEON aeonpeople
0
170
おやつは300円まで！の最適化を模索してみた
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
290
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
Avatar for Logy nologyance
1
320
Skrub: machine-learning with dataframes
Avatar for Gael Varoquaux gaelvaroquaux
0
120
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
Avatar for Tobias Lampert tobiaslampertlotum
0
150
2025年夏 コーディングエージェントを統べる者
Avatar for nwiizo nwiizo
0
120
Automating Web Accessibility Testing with AI Agents
Avatar for South maminami373
0
1.1k

Featured

See All Featured
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.9k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.5k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
302
21k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k

Transcript

  1. Look Deeply Into Your App Vanessa Yuen with Augury @rangleio

    @vanessayuenn

  2. WHAT IS AUGURY? @rangleio @vanessayuenn ◦ Angular 2 development aid

    ◦ Not just a debugger ◦ Chrome extension ◦ Open source effort started at Rangle.io ◦ (by wikipedia definition) an ancient bird watching practice??? Augury is...

  3. Prototyped was first demoed at AngularConnect in October 2015 THE

    PAST @rangleio @vanessayuenn

  4. After several major iterations with feedback from usability testing the

    beta version was launched at ngConf in May 2016. THE PRESENT @rangleio @vanessayuenn

  5. WHY DO I NEED AUGURY? @rangleio @vanessayuenn

  6. WHY DO I NEED AUGURY? @rangleio @vanessayuenn

  7. WHY DO I NEED AUGURY? @rangleio @vanessayuenn

  8. WHY DO I NEED AUGURY? @rangleio @vanessayuenn

  9. WHY DO I NEED AUGURY? @rangleio @vanessayuenn

  10. WHY DO I NEED AUGURY? @rangleio @vanessayuenn

  11. WHY DO I NEED AUGURY? @rangleio @vanessayuenn

  12. WHY DO I NEED AUGURY? @rangleio @vanessayuenn

  13. WHY DO I NEED AUGURY? @rangleio @vanessayuenn

  14. WHY DO I NEED AUGURY? Hierarchical Injection @rangleio @vanessayuenn

  15. WHY DO I NEED AUGURY? Hierarchical Injection @rangleio @vanessayuenn Routing

    & Navigation

  16. WHY DO I NEED AUGURY? Hierarchical Injection @rangleio @vanessayuenn Routing

    & Navigation Change Detection

  17. WHY DO I NEED AUGURY? Hierarchical Injection @rangleio @vanessayuenn Routing

    & Navigation Change Detection #WTF

  18. Augury is not just a debugger... • Component Relationships •

    Detailed Component Info • Dependency Hierarchy • Change Detection Strategy • Editable Component Properties • Router Structure Look Deeply Into Your App

  19. DEMO TIME @rangleio @vanessayuenn

  20. UNDER THE HOOD @rangleio @vanessayuenn ◦ Augury is an Angular

    2 application written in TypeScript ◦ Chrome Extension APIs ◦ Angular 2’s Debug APIs ◦ Detailed architectural documentation in repo: github.com/rangle/augury

  21. ROADMAP @rangleio @vanessayuenn 1. Stability 2. Final Angular-2.0 support 3.

    Support New “new” router 4. More UX feedback 5. Exploration for more features

  22. OPEN SOURCE COMMUNITY @rangleio @vanessayuenn That’s all of you!

  23. WE LOVE CONTRIBUTIONS! @rangleio @vanessayuenn github.com/rangle/augury

  24. INTERNAL CONTRIBUTORS Bertrand Karerangabo Sumit Arora Igor Kamenetsky Vanessa Yuen

    Fatima Remtullah Justina Choi Richard Hobeiche Mike Costanzo

  25. Beta Version of Angular Augury is available on the Chrome

    Web Store GET AUGURY @rangleio @vanessayuenn

  26. THANK YOU! @rangleio @vanessayuenn