Giter VIP home page Giter VIP logo

mastering-chrome-devtools's Introduction

Introduction to Dev Tools, v3

Note: If you're looking for Mastering Chrome Devtools, v2:

A web app for teaching people about Chrome DevTools. This is the website and course materials for the Introduction to Dev Tools, v3 on Frontend Masters.

Requirements

This app requires Node.js which can be downloaded here

How to use

git clone https://github.com/jkup/mastering-chrome-devtools.git
cd mastering-chrome-devtools
npm install
npm start

Then visit http://localhost:3000

If you'd like the app to automatically reload on changes

git clone https://github.com/jkup/mastering-chrome-devtools.git
cd mastering-chrome-devtools
npm install -g nodemon
npm install
nodemon server/server.js

Note: If you're looking for Mastering Chrome Devtools v2, run:

git clone https://github.com/jkup/mastering-chrome-devtools.git
cd mastering-chrome-devtools
git checkout v2
npm install
npm start

mastering-chrome-devtools's People

Contributors

1marc avatar bradford-hamilton avatar dependabot[bot] avatar jkup avatar nem035 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mastering-chrome-devtools's Issues

debugging2.js not served from the debugging page

This isn't a major deal, but took me a minute to figure out. maybe it will help others watching the debugger and breakpoints videos.

Using Chrome Version 55.0.2883.95 (64-bit)

Steps to replicate :

node server.js

navigate to : http://localhost:3000/debugging

Open chrome dev tools, click sources tab.

Expected :
I can see the "debugging2.js" file in my Dev Tools "Sources" tab

Actual :
The "debugging2.js" file does not appear in the sources tab, nor does it appear in the list of files when searching with Cmd + P.

Notes :
Editing server.js and including 'debugging2.js' serves the file and it appears in my sources tab.

// Debugging Demo
app.get('/debugging', function (req, res) {
  res.render('debugging', {
    scripts: ['debugging.js','debugging2.js']  <-- I can just add it here and it works.
  })
})

What's strange is I think after creating a Workspace and adding my local files I was able to see the debugging2.js, even after I removed the Workspace. But then on subsequent refreshes of the page the file debugging2.js no longer appeared under the sources tab, so I went ahead and edited server.js as above.

Good class, I'm learning a lot, thanks!

Before editing server.js to serve the file explicity :

screen shot 2017-01-26 at 11 55 04 am

After editing server.js :

screen shot 2017-01-26 at 11 55 49 am

npm install throws error

when doing npm install i keep getting errors about not being able to find some packages, current error points:

npm ERR! code E404
npm ERR! 404 Not Found: @types/babylon@^6.16.2

Tried installing through yarn, but got the same error.

edit: this only happens in mac, in windows 10 i was able to run npm install with no issues

deployment

hello I have an app with a similar structure to this (layouts in a views folder, and the rest of the assets in a public folder). The dev server works well, but I'm not exactly sure of the proper technique to deploy this app to a live url. Are there any further resources on this you would recommend? thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.