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

chrome-dev-tools-dotnet.pdf

Greg Malcolm
March 18, 2018
46

 chrome-dev-tools-dotnet.pdf

Greg Malcolm

March 18, 2018
Tweet

Transcript

  1. CHROME DEV TOOLS: RAIDING THE ARMORY
    @gregmalcolm GregMalcolm

    View full-size slide

  2. gregmalcolm
    http://bit.ly/wickedweaponsdotnet
    Slides and Code:

    View full-size slide

  3. Wacky Wanda’s Wicked Weapons
    Wacky Wanda’s Wicked Weapons
    Putting The Whack Back In Wacky!

    View full-size slide

  4. Wacky Wanda’s Wicked Weapons
    Wacky Wanda’s Wicked Weapons
    Putting The Whack Back In Wacky!

    View full-size slide

  5. Wanda MVC™
    Controller
    Model
    View
    Router

    View full-size slide

  6. What Wanda Wanted What Wanda Got

    View full-size slide

  7. Elements Panel
    Make Wanda’s Head Spin
    No, really!

    View full-size slide

  8. Console Panel/Drawer
    Enchanted Weapons Part 1

    View full-size slide

  9. This is what we’re want to build out. We’ll be adding a checkbox. Clicking the checkbox will cause the attributes to change and magical glow to appear.

    Work has actually already begun on this but tragically my predecessor was tragically eaten by a balrog from the accounts department.

    View full-size slide

  10. We keep explaining to Gary that developers are friends not food, but he hasn’t quite grasped the difference yet.

    View full-size slide

  11. Sources Panel
    Enchanted Weapons Part 2

    View full-size slide

  12. Template - Add a checkbox
    Sources Panel
    Enchanted Weapons Part 2
    Tasks:
    View - Add a checkbox event listener
    Controller - Update the weapon model

    View full-size slide

  13. Network Panel
    Jacked Ajax

    View full-size slide

  14. Resources
    https://developers.google.com/web/tools/chrome-devtools/
    Learn Dev Tools:
    (or go to Dev Tools Menu -> Help -> Documentation )
    Presentation Materials:
    https://speakerdeck.com/gregmalcolm/chrome-dev-tools
    https://github.com/gregmalcolm/WackyWandasWickedWeaponsDotNet
    https://github.com/gregmalcolm/wacky-wandas-wicked-weapons-api
    http://bit.ly/wickedweaponsdotnet
    or

    View full-size slide