NodeJS & ExpressJS: HTTP Requests Using the Google Chrome Devtools Console
This blog post will guide you through the process of using the Google Chrome Developer Tools (Chrome DevTools) console to send HTTP GET and POST requests. You will also learn how to set up a simple ExpressJS server using JavaScript and NodeJS to handle the requests you send through the Chrome Browser.
The Google Chrome DevTools toolset will enable you to delve deeper into the code structure of web pages, network connections, and protocol specifics, such as HTTP headers and the HTTP POST body. This toolset allows developers and analysts to gain deeper insight into Web communication and code structure.
Setting Up A NodeJS Project
To demonstrate the process of sending HTTP requests from the Chrome DevTools Console, we will create a simple HTTP server using NodeJS and ExpressJS. NodeJS is a popular JavaScript runtime environment that allows you to run JavaScript on the server side, while ExpressJS is a minimalist and flexible web application framework that provides useful features for web and mobile applications. We will specifically use ExpressJS routing capabilities to handle various routes from the Google Chrome Developer Console.
First, we will install NodeJS and ExpressJS and several helper packages for our project. Once installed, we will create a new directory and initialize a NodeJS project using the command line interface. We will then install the required dependencies, including ExpressJS, using the Node package manager or NPM.
Install NodeJS on Windows 11
To set up our project, we need to install NodeJS, which is an open-source, cross-platform JavaScript runtime environment that allows us to execute JavaScript code outside of a web browser.
The NodeJS runtime environment can be easily installed on Windows 11 by using the Windows Package Manager (winget), which is a command-line tool that helps you discover and install software packages easily.
To install NodeJS on Microsoft Windows 11, simply run the following command in the command prompt or PowerShell:
winget install nodejs
This command will download and install the latest version of NodeJS on your computer. Once installed, you can start using NodeJS to run JavaScript code and build applications.
Install NodeJS on MacOS
If you have an Apple computer running on the macOS operating system, you can easily download and install NodeJS through the Homebrew package manager. Using Homebrew, you can easily manage NodeJS and its dependencies on your system. In order to install NodeJS with Homebrew, simply execute the following command from the command-line interface.
brew install node
Using this command, Homebrew will download and install the latest version of NodeJS, making it readily available for use in your projects.
Install NodeJS on Ubuntu Linux
Installing NodeJS on Ubuntu or other Debian Linux machines couldn't be easier, run sudo apt install nodejs this command will use the APT package manager to download and install NodeJS along with any dependencies.
Installing NodeJS Using Other Package Managers
For a full list of how to install NodeJS through other popular package managers, see the following NodeJS Installation Documentation.
Installing Necessary Project Dependencies
Once we have NodeJS available on our system, we can set up our NodeJS project. In order to do this, we will create a directory and open this directory in a text editor such as Visual Studio Code. Next, we will install several packages and middleware support packages, including ExpressJS. Here is the list of NPM packages we will install, including some essential middleware for interacting with our web server from the Google DevTools console:
By following these steps, you will better understand how to send HTTP requests from the Chrome DevTools Console and how to set up a simple HTTP server using NodeJS and ExpressJS. In order to install these NodeJs dependencies, we can simply run the following command.
npm install express body-parser express-csp-header express-useragent
Running this command will install the packages and middleware required to interact with the Google Chrome DevTools console. With this accomplished, we can write the JavaScript code to set up our web server and handle HTTP GET and POST requests.
Setting Up ExpressJS HTTP Server
Next, we will create a new file named "server.js" and write the code to set up the HTTP server using ExpressJS. This will involve defining the routes for the server, which will handle the incoming HTTP requests and return the appropriate responses.
After setting up the server, we will start it by running the "server.js" file using the command line interface. We will then open the Chrome DevTools Console and use the "fetch" API to send HTTP requests to the server. This will allow us to test the server and verify that it is handling the requests properly.
ExpressJS Code
The following code will set up our sample ExpressJS app, which will act as our HTTP web server.
const express = require('express');
const { expressCspHeader, INLINE, NONE, SELF } = require('express-csp-header');
var bodyParser = require('body-parser');
const app = express();
const port = 8888;
var jsonParser = bodyParser.json()
This section imports the necessary modules: express for creating the server, and express-csp-header for setting up Content Security Policy headers. The body-parser module is imported for handling JSON data. Finally we setup an instance of the Express application and the server to run on port 8888.
Content Security Policy (CSP)
In order to send requests to our web server application we need to set the Content Security Policy (CSP) to allow us to interact with our web server from Google Chrome.
app.use(expressCspHeader({
directives: {
'default-src': [SELF],
'script-src': [SELF, INLINE, '127.0.0.1'],
'worker-src': [NONE],
'block-all-mixed-content': true
}
}));
app.listen(port, () => {
console.log(`Serving from ${port}`)
})
The expressCspHeader middleware is used to set up our Content Security Policy headers. The above code restricts the sources for various types of content. Such as, 'script-src': [SELF, INLINE, '127.0.0.1'] allows scripts to be loaded only from the same origin, inline scripts, and the specified IP address. Finally, we will use the .listen() method to ensure our ExpressJS application listens on the TCP port we specified.
ExpressJS Routes
To demonstrate both an HTTP GET Request and HTTP POST request we will define two routes in ExpressJS.
ExpressJS Web Server GET Route
The following code will handle HTTP GET requests. As a response when we receive a GET request to the root of our web server we will send the HTTP method, path, and user-agent header back to the requester using the .send() method.
app.get('/', (req, res) => {
res.send(req.method, req.path, req.headers['user-agent']);
})
ExpressJS Web Server POST Route
The following code will handle HTTP POST requests. As a response, when we receive a POST request to the /post endpoint of our web server, we will send the log of the request method and send the request body back to the requester.
app.post('/post', jsonParser, (req, res) => {
console.log(req.body);
res.send(req.body);
})
Final Web Server (Server.js) Code
const express = require('express')
const { expressCspHeader, INLINE, NONE, SELF } = require('express-csp-header');
var bodyParser = require('body-parser')
const app = express()
const port = 8888
var jsonParser = bodyParser.json()
app.use(expressCspHeader({
directives: {
'default-src': [SELF],
'script-src': [SELF, INLINE, '127.0.0.1'],
'worker-src': [NONE],
'block-all-mixed-content': true
}
}));
app.listen(port, () => {
console.log(`Serving from ${port}`)
})
app.get('/', (req, res) => {
res.send(req.method, req.path, req.headers['user-agent']);
})
app.post('/post', jsonParser, (req, res) => {
console.log(req.body);
res.send(req.body);
})
Run the Server
We can run the server by using using the node server.js command. This will initiate our web server and allow us to start sending web requests to it with the Chrome Developer Tools (Chrome DevTools).
Sending HTTP Get Requests Using Chrome DevTools
In order to send web requests to our web server using the Chrome DevTools open up chrome. Next, we open the Chrome JavaScript console using one of the following Google Chrome shortcut commands:
Command + Option + J (MacOS)
Control + Shift + J (Windows/Linux)
Once the Google DevTools console is opened, we can move on to the JavaScript code we will enter in order to interact with our ExpressJS web server.
Send HTTP GET Requests From Chrome DevTools Console
The Chrome DevTools Console offers a useful feature that allows us to send HTTP GET requests using the Fetch API. The FETCH API interface provides a JavaScript interface for interacting with the HTTP protocol. This capability can come in handy when we need to test a web application or when we want to retrieve data from a server. With a simple command, we can send an HTTP GET request and receive a response from the server. For instance, we can use the following command to send an HTTP GET request.
fetch('http://127.0.0.1:8888', {
method: 'GET',
})
.then(console.log)
Send HTTP POST Requests From Chrome DevTools Console
When working in the Chrome DevTools Console, we have the ability to send an HTTP POST request using the Fetch API. This method allows us to send data to a server for processing or storage. To execute an HTTP POST request, we simply need to use the correct command with the Fetch API. This can be an incredibly useful tool for web developers and programmers who need to test and troubleshoot server-side functionality.
fetch('http://127.0.0.1:8888/post', {
method: 'POST',
body: JSON.stringify({
title: 'title',
userId: 1
}),
headers: {
'Content-type': 'application/json'
}
})
.then(console.log)
Conclusion
The usage of Google Chrome Developer Tools (Chrome DevTools) console can be a powerful tool for developers and analysts to navigate and comprehend the complexities of web development. This article guided you through the essential steps of sending HTTP GET and POST requests, as well as helping you establish a simple ExpressJS server using JavaScript and NodeJS. By leveraging the capabilities of Chrome DevTools, you will be able to explore web page code structures, scrutinize network connections, and dissect protocol specifics, including HTTP headers and POST bodies.
This toolset facilitates not only debugging and optimization but also helps you gain profound insights into web communication and code organization. As you continue to delve into the world of web development, the skills acquired in this guide will undoubtedly enhance your ability to analyze, troubleshoot, and refine your web applications. Embrace the power of Chrome DevTools as a valuable ally in your development journey, propelling you towards a deeper understanding of the intricacies that shape the digital landscape.