Tính năng mới trong Developer Tools của Chrome 59
Đây là bài viết mình dùng để note lại những điểm mới trong Developer Tools mà Chrome đã cung cấp cho người dùng ở phiên bản Chrome số 59. Mọi người có thể xem bản tiếng Anh ở link sau : https://developers.google.com/web/updates/2017/04/devtools-release-notes Đây là tính năng giúp chúng ta có thể ...
Đây là bài viết mình dùng để note lại những điểm mới trong Developer Tools mà Chrome đã cung cấp cho người dùng ở phiên bản Chrome số 59. Mọi người có thể xem bản tiếng Anh ở link sau : https://developers.google.com/web/updates/2017/04/devtools-release-notes
Đây là tính năng giúp chúng ta có thể kiểm tra mức độ Coverage của code JS và CSS được nhúng vào trong trang HTML, từ đó giúp phát hiện ra các phần code thừa hoặc các vấn đề trong Logic để refactor và tối ưu lại code. Đặc biệt với chức năng này, chúng ta có thể kết hợp với các tool auto test (Karma các kiểu) để kiểm tra code coverage phần js/css của trang web.
Sau đây mình sẽ demo cách sử dụng Coverage Trước hết chúng ta sẽ có một thư mục gồm các file như sau :
Và đây là code cho từng file:
# file index.html
<html>
<head>
<title>Demo JS the weird part</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
</head>
<body>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="newapp.js"></script>
<button type="button" onclick="hello()">Click me!</button>
</body>
</html>
# file app.js
function mapForEach(arr, fn) {
var result = [];
for(var i = 0; i < arr.length; i++) {
result.push(fn(arr[i]));
}
return result;
}
console.log(mapForEach([1,2,3], function(a) {
return a+2;
}));
# file newapp.js
function hello() {
this.event.target.classList.add("blue");
console.log("Hello World");
}
# file style.css
button {
color: red;
}
.yellow {
color: yellow;
}
Các file này ko có gì đặc biệt, chủ yếu là để kiểm tra xem trang web load css/js như thế nào thôi
