Queries eXplorer is a middleware that aims to be a Chrome Network Inspector inside a web page.
npm i @crock/qx
import express from 'express';
import qx from '@crock/qx';
const qxRouter = qx({
endpoint: '/qx',
});
const app = express();
app.use(qxRouter);
app.listen(3000);
Note: In order to intercept all the traffic, always mount QX at the root level and use the endpoint
option to specify the endpoint of the client.
Different profil can be configured according to the intercepted url. For example, if you work with 2 API on two different endpoints, like /api/shop
and /api/account
, you can configure QX like that:
const qxRouter = qx({
endpoint: '/qx',
profiles: [{
name: 'Shop',
color: 'red',
urlsFilter: (req) => /^\/api\/shop\//.test(req.originalUrl),
// ...,
}, {
name: 'Account',
color: 'yellow',
urlsFilter: (req) => /^\/api\/account\//.test(req.originalUrl),
// ...,
}],
});
- Import QX from an absolute path:
import QX from '/path/to/QX';
- Set the
development
option to true:
const qxRouter = qx({
endpoint: '/qx',
development: true,
});
- Start webpack-dev-server from QX:
cd qx/client
npm run dev