Web development tools

The browser developer tools' panels and the symptom each one sheds light on, the package manager and its dependencies file, the development server, the bundler, the linter and the formatter.

25 cards
4 topics
Free

Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

Concepts
Questions
Sort and link
Scenarios

A few cards from the deck

Browser developer tools: what is it?
Show the answer
Panels built into the browser to inspect a page: Elements (the DOM and CSS), Console (messages and errors), Network (requests), Sources (code and breakpoints), Performance (time spent).
Each panel answers one kind of symptom: picking the right one avoids searching at random.
Which command adds D3 to the dependencies in package.json and installs it?
- npm install d3
- npm run d3
- npm publish d3
- npm start d3
Show the answer
npm install d3
npm install <package> downloads the package into node_modules and records it in package.json. run runs a project script, start starts the project and publish sends your own package to the registry.
The … file lists a project's dependencies; the … folder holds their installed code and is not versioned.
Show the answer
The package.json file lists a project's dependencies; the node_modules folder holds their installed code and is not versioned.
A colleague clones the repository, runs npm install, and the folder is rebuilt from the file: you do not copy thousands of files into Git.
Breakpoint: what is it?
Show the answer
A mark placed on a line of code that pauses execution just before that line, so you can inspect variables and step through.
It replaces a series of console.log calls: you see all the values at the exact moment the program stops.
A colleague clones your project and gets Error: Cannot find module 'd3' on launch. D3 is listed in package.json. What should they do?
- Run npm install in the folder: it rebuilds node_modules from package.json
- Install D3 globally with npm install -g d3
- Ask you to send your node_modules folder
- Run npm start, which installs what is missing before starting
Show the answer
Run npm install in the folder: it rebuilds node_modules from package.json
node_modules is not in the repository: on their machine, the dependencies were never installed, hence MODULE_NOT_FOUND. package.json is enough to reinstall everything. A global install does not resolve the project's imports, and npm start runs the project without installing anything.

Study this deck