Test Mobile Devices with Chrome Devtools – Howto

Press F12 or just open Chrome Dev Tools.
Click on the Toggle Device Icon (marked in blue).

In your browser window, you will see this resolution modifyier:

Modify according to your needs to test different screen resolutions.

NOTE: Screen Resolution CANNOT be simulated by changing the browser window size 😉

Multiple Webapps with Docker Compose

  • Learn how to setup a custom network for your containers: container A talks to container B
  • Learn how to run multiple webapps inside Docker containers on different ports with Docker Compose

Download complete source code here

  • Create the network with $docker network create skynet
  • Run with $docker-compose up
  • Stop with $<Ctrl + C>
  • Clean up from time to time (beware, network will be deleted as well) with $docker system prune -a -f
  • access via http://localhost:8080/sample
  • access via http://localhost:8081/sample

How to debug a React Application in Webstorm

In Webstorm, start your application. I prefer the command line:
$ npm start

Then create a new JavaScript debug configuration:

Run – Edit configurations … add JavaScript Debug.

Choose your project path (because we are Harder IT Consulting, our nickname is HIT – C:\HIT\<application>)

Paste the URL http://localhost:3000 (or the URL you have configured your React Application to run on, 3000 is the default).

Press the DEBUG button at the top right corner with your Debug configuration selected.