Debug
like a detective
Mariam reba Alexander
Software Engineer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9066470/Maersk_Logo_RGB_Neg_Txt.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9069005/20210622_104413-removebg-preview.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9068956/download.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9068957/download-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9068962/download-3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9068965/download-4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9068966/download-5.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9068980/download-7.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9069017/download-11.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9069023/download-8.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9069025/download.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9069031/download-1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9069033/download-12.png)
web
security
Maersk.com - Logistics HUB
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9069066/Screenshot_2021-10-31_at_19.23.25.png)
LivES in Denmark
KERALA, SOUTH INDIA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9069187/download-3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9069189/miss-marple-tv-adaptation-agatha-christie-1280x720.jpg)
MYSTERIES
INVESTIGATion
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9075092/marple.jpeg)
Looking for clues
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9075127/clues.jpeg)
What Clue do you look for ?
console errors
USUal suspects
- TypeError / Reference Error
- Script error
- Syntax Error: JSON.parse
- Network error
Uncaught TypeError: Cannot read properties of undefined (chrome)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9078554/Screenshot_2021-11-03_at_19.09.22.png)
REal WORLd EXAMPLE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9281463/Screenshot_2022-01-22_at_17.49.23.png)
REal WORLd EXAMPLE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9079003/Screenshot_2021-11-03_at_21.53.08.png)
REal WORLd EXAMPLE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9281467/Screenshot_2022-01-22_at_18.03.53.png)
Typerror: undefined/null is not an object (safari)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9079054/Screenshot_2021-11-03_at_22.29.29.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9079057/Screenshot_2021-11-03_at_22.31.48.png)
FIX
//define testarray
const test = [];
//check defined
if(test){
console.log(test.length === 0);
}
//OR
console.log(test?.length === 0);
script error
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9079623/Screenshot_2021-11-04_at_06.32.54.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9079929/Screenshot_2021-11-04_at_09.53.41.png)
code
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
FIX 1
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://cdn.jsdelivr.net/npm/bootstrap@5.1.3">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
FIX 2
//set a Cross Origin HTTP header server side
Acess-Control-Allow-Origin: *
//Example for Node js
// Add headers before the routes are defined
app.use(function (req, res, next) {
// domain you want to allow
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8000');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
//OR specify multiple domains
app.use((req, res, next) => {
const allowedOrigins = ['http://127.0.0.1:8020', 'http://localhost:8020', 'http://127.0.0.1:9000', 'http://localhost:9000'];
const origin = req.headers.origin;
if (allowedOrigins.includes(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
}
//res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:8020');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
SyntaxError: JSON.parse: bad parsing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9080155/Screenshot_2021-11-04_at_11.22.29.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9080157/Screenshot_2021-11-04_at_11.23.07.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9080165/Screenshot_2021-11-04_at_11.25.31.png)
Parsing invalid json
Property names must be double-quoted strings
No trailing commas
Look for clues
- Console errors
- Examples: Typerror, Script error, Syntax error
2. collect witness statements
Cross-checking
- Compare cross-browser
- Compare with another system
- Comparing commits
usual suspects
- Polyfills/fallbacks missing for unsupported browser feature
- Git branch behind commits - git pull
- Package not updated - npm install
- Browser cache - Empty cache and reload
- Network request
- Token expiry
3. Narrow down suspect list
![](https://media0.giphy.com/media/SV5k9Ulnk9LdgYnjbe/giphy.gif)
devtools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085287/devtools.png)
$0- $4 (console utilities API)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084584/Screenshot_2021-11-05_at_16.12.40.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085240/pasted-from-clipboard.png)
Break points
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084466/Screenshot_2021-11-05_at_15.07.25.png)
conditional Break points
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084470/Screenshot_2021-11-05_at_16.04.27.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084471/Screenshot_2021-11-05_at_16.04.41.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084472/Screenshot_2021-11-05_at_16.05.31.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084478/Screenshot_2021-11-05_at_16.05.41.png)
watch
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084479/Screenshot_2021-11-05_at_16.06.07.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084481/Screenshot_2021-11-05_at_16.08.25.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084483/Screenshot_2021-11-05_at_16.09.23.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084485/Screenshot_2021-11-05_at_16.09.40.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084490/Screenshot_2021-11-05_at_16.09.51.png)
Live expressions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084578/Screenshot_2021-11-05_at_16.24.07.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9084579/Screenshot_2021-11-05_at_16.24.15.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9079003/Screenshot_2021-11-03_at_21.53.08.png)
Code
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>Here is a suggestion on what you can do</p>
<h3>{{ response.data.activity }}</h3>
<p>Type: {{ response.data.type }}</p>
<button class="button-pink" role="button" @click="getSuggestion">
Suggest me again
</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: 'Debug',
props: {
msg: String
},
data() {
return {
response: {}
}
},
mounted(){
this.getSuggestion();
},
methods: {
async getSuggestion() {
try {
this.response = await axios.get('https://www.boredapi.com/api/activity');
} catch (error) {
console.error(error);
}
}
}
}
</script>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9098806/Screenshot_2021-11-10_at_21.56.00.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9098812/Screenshot_2021-11-10_at_21.57.44.png)
FIX
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>Here is a suggestion on what you can do</p>
<template v-if="response.data">
<h3>{{ response.data.activity }}</h3>
<p>Type: {{ response.data.type }}</p>
</template>
<button class="button-pink" role="button" @click="getSuggestion">
Suggest me again
</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: 'Debug',
props: {
msg: String
},
data() {
return {
response: {}
}
},
mounted(){
this.getSuggestion();
},
methods: {
async getSuggestion() {
try {
this.response = await axios.get('https://www.boredapi.com/api/activity');
} catch (error) {
console.error(error);
}
}
}
}
</script>
working app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9281465/Screenshot_2022-01-22_at_18.00.13.png)
Monitor window events
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085952/pasted-from-clipboard.png)
monitorevents($0)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9098926/Screenshot_2021-11-10_at_22.55.00.png)
network Block url
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085956/Screenshot_2021-11-06_at_20.16.24.png)
save request as har
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085975/Screenshot_2021-11-06_at_20.19.36.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085974/Screenshot_2021-11-06_at_20.21.17.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085973/Screenshot_2021-11-06_at_20.23.39.png)
copy as curl
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9086041/Screenshot_2021-11-06_at_20.34.20.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9086042/Screenshot_2021-11-06_at_20.38.20.png)
devtools extensions
angular devtools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085675/Screenshot_2021-11-06_at_16.25.58.png)
React developer tools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085677/Screenshot_2021-11-06_at_16.24.53.png)
vue devtools
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085674/Screenshot_2021-11-06_at_16.26.41.png)
git
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9068966/download-5.png)
Git diff / compare
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085563/Screenshot_2021-11-06_at_15.34.18.png)
Git blame
#show last author of each line of file
git blame src/script.js
#show last author of specified line
git blame src/script.js -L 28,29
#show moved or copied lines within
# the same file (original author)
git blame -M src/script.js
#shows lines that were moved or
#copied from other files (original author)
git blame -C src/script.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9091205/Screenshot_2021-11-08_at_21.04.06.png)
Git Bisect
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085929/Screenshot_2021-11-06_at_19.25.22.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085929/Screenshot_2021-11-06_at_19.25.22.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9085935/Screenshot_2021-11-06_at_19.34.38.png)
4. an associate can come in handy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9087011/poirot-captain-hastings-t.jpeg)
5.capturing
Error handling & tests
//ERROR HANDLING
try {
doSomething();
} catch (e) {
console.log(e);
}
//UNIT TESTS
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
//E2E TESTS
describe('My e2e Test', () => {
it('Gets, types and asserts', () => {
cy.visit('https://example.cypress.io')
cy.contains('type').click()
cy.url().should('include', '/commands/actions')
cy.get('.action-email')
.type('fake@email.com')
.should('have.value', 'fake@email.com')
})
})
error monitoring
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9087060/Screenshot_2021-11-07_at_15.12.17.png)
Summary
- Looking for clues
- console errors
- Collecting witness statements
- cross checking browser and system
- Narrowing down suspect list
- Techniques using Devtools and Git
- Capturing
- tests, error handling and monitoring
Questions ?
Thank you
@MariamReba
https://dev.to/ms_74
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2017273/images/9087662/qrcode_dev.to.png)
jsworld2022
By Mariam Reba Alexander
jsworld2022
- 146