DEV Community: bytefish

5 Ways to Add Breakpoints on Chrome Devtools

bytefish — Fri, 07 Jan 2022 07:43:51 +0000

Debug is a skill that every developer must master, and adding breakpoints to the code is the basic of debugging. This article will share 5 ways to add breakpoints in Chrome DevTool.

1# Add breakpoints directly

Go to Source Tag of Chrome Devtools, click the line number where the code is located to add a breakpoint.

This should be the most common way for everyone to add breakpoints.

2# Conditional breakpoints

But sometimes, we want a breakpoint to take effect only under certain conditions. At this time, we can take the following approach.

Right-click the line number column
Choose Add conditional breakpoint
Enter your condition in the dialog

For Example, we want to pause the code when i is greater than 10,

for(let i=0; i<20; i++){
     console.log(`i * i = ${i * i}`)
}

We can:

3# DOM change breakpoints

In some cases, we don't want to pause the code at a certain location, but only when a DOM element changes. At this time, we can do this:

Click the Elements tab.
Go to the element that you want to set the breakpoint on.
Right-click the element.
Hover over Break on then select Subtree modifications, Attribute modifications or Node removal.

For example, we want to pause the code when the hello element will change:

<div id="hello">
    Hello 2022.
</div>
<script>
    document.getElementById("hello").onclick = (event) => {
      event.target.innerText = new Date().toString()
    }
</script>

We can:

Note:

Subtree modifications. Triggered when a child of the currently-selected node is removed or added, or the contents of a child are changed. Not triggered on child node attribute changes, or on any changes to the currently-selected node.
Attributes modifications: Triggered when an attribute is added or removed on the currently-selected node, or when an attribute value changes.
Node Removal: Triggered when the currently-selected node is removed.

4# XHR/Fetch breakpoints

If you want to pause the code when JavaScript is trying to make an HTTP request to a URL, we can do this:

Click the Sources tab. Expand the XHR Breakpoints pane. Click Add breakpoint. Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR's request URL. Press Enter to confirm.

For example, we want to pause the code when the script tries to requesting api.github.com .

<body>
  <div id="hello">
    Hello 2022.
  </div>
  <script>
    fetch("https://api.github.com")
     .then(res => {
       console.log(res)
     })
  </script>
</body>

We can:

5# Event listener breakpoints

Of course, we can also pause the code when a certain event is triggered.

<body>
  <div id="hello">
    Hello 2022.
  </div>
  <script>
    document.getElementById("hello").onclick = (event) => {
      console.log('hello 2022')
    }
  </script>
</body>

If you want to pause the code after the hello element is clicked, then we can do this:

What Is the Difference in Thinking Model Between Programmers and Normal Persons?

bytefish — Wed, 05 Jan 2022 07:50:16 +0000

Recently, one of my friends approached me. He told me that he wanted to learn programming, but he didn’t know if he was suitable for this profession. So he asked me a question: Is there any difference between programmers and normal persons in thinking model?

I know that he has never learned programming before, and it is quite difficult to introduce programming thinking to people who have no coding experience. Um, after thinking about it for a while, I plan to explain the problem in another way.

I asked him: If you were to buy two pounds of apples now, what would you do?

He said: Go directly to the fruit shop to buy it.

I said: If we want to express the process of buying apples programmatically, it might be like this.

First of all, we must clarify our needs, for example:

I plan to buy about two pounds of apples
The price I can accept is less than 1.5$ per pound

Then we can design the following process:

Query surrounding fruit shops to get a shop list;
Visit the fruit shops in the list one by one, and perform the following operations:
- Go to the fruit shop;
- If the fruit shop is not open, end the current process and then visit the next fruit shop;
- If there is no apple left in the fruit shop, end the current process and then visit the next fruit shop;
- If the price of the apples is higher than US$1.5 per pound, then:
  - Ask the shop owner whether he is willing to lower the price;
  - If the shop owner does not agree, end the current process and then visit the next fruit shop
- Take a bag;
- Start picking apples;
- Continue the following operations until the weight of the apples in the bag is greater than two pounds:
  - Pick an apple from the pile of apples;
  - Put the apple in the bag;
- Calculate the total price of apples in the bag;
- Total price = weight of apples in the bag multiply unit price of apples;
- Pay money;
- Leave the shop;
- Skip the remaining fruit shops in the list;
Take apples home;

Programmers need to consider problems in a rigorous and accurate way.

In the above process, we need to record the surrounding fruit shops, so we need to define the variable friutShops.
We need to visit different fruit shops in turn, which is called traversal.
Then we need to judge the boundary conditions, for example, what if the fruit shop does not open? What if the price of Apple exceeds my expectations?
When we are picking apples, we need to keep putting apples in the bag until it exceeds two pounds. This is called looping.

These are the most basic steps when a programmer considers a problem.

If we use pseudo-code to represent this process, it may be like this:

Query surrounding fruit shops to get fruitShops;
for(fruitShop in fruitShops){
  if(fruitShop.isOpen == false){
    break;
  }
  if(fruitShop.apple.price > 1.5){
    Ask the shop owner whether he is willing to lower the price;
    if(the shop owner does not agree){
      break;
    } else {
      fruitShop.apple.price = newPrice;
    }
  }

  Take a bag;
  Start picking apples;
  while(the weight of the apples in the bag is less than two pounds){
    Pick an apple from the pile of apples;
    Put the apple in the bag;
  }
  Calculate the total price of apples in the bag;
  Total price = (weight of apples in the bag) * (unit price of apples);
  Pay money;
  Leave the shop;
  return;
}
Take apples home;

After listening to my description, my friend said: Um, you explained well, it seems simple.

Then, I went on to say: The process is really not complicated, but in the real development, we have to consider many things. For example, in the above case, as long as we find a shop where the price of apples is less than $1.5 per pound, we will buy apples immediately. But if now we want to find the fruit shop with the lowest price for apples. What should we do?

My friend said: It’s too simple. Go to every fruit shop and ask for the price. Then you can find the fruit shop with the lowest price.

I said: But we are very lazy and don’t want to walk too much. Now there are 10 fruit shops around us, and they are distributed in different locations. If we want to walk as little as possible while traversing these 10 fruit shops, how can we arrange the order of visits to minimize the total path?

After thinking about it for a long time, my friend replied: Well, this question sounds complicated, I don’t know.

I said: It’s okay. This is actually a classic algorithm problem in programming. It’s normal that you won’t think of the answer for a while. When a programmer writes code, he must not only solve the problem correctly, but also solve the problem as efficiently as possible. In the development process, we are solving similar problems one by one.

Then I continue: And when we choose apples, we all hope to buy bigger and redder apples. Now you need to select N apples from the pile of apples. And you need to make sure that they are the best apples and that the sum of their masses is just over 2 pounds. How do you choose?

My friend: Well, it’s still a bit difficult.

I said: Some people will first sort the apple piles according to the quality, and then choose the best apples, but how to sort the apple piles quickly is another problem.

My friend: Okay, stop talking about it, my mind is a little dizzy. It seems that I am still not suitable as a programmer.

I said: Haha, it’s okay. I’m a little hungry. Let’s buy some apples first. 😁😁

Learn Python From Scratch As a Frontend Developer

bytefish — Sun, 28 Nov 2021 02:06:52 +0000

As I mentioned in the title, I am a frontend developer who is familiar with JavaScript. Recently, I am going to learn Python from scratch.

Why do I want to learn Python now?

Because I want to write a web crawler and do some data analysis.

I have two choices for web scraping:

Use Nodejs-related tech stack
Use Python-related tech stack

Nodejs is a tool that I have worked with for some years. If I choose Node for web scraping, I can reuse my knowledge and don’t need to learn new things.

But as I know, Python is a more popular language for web scraping. It has a thriving ecosystem in this field. If I choose Python, there are lots of tools, libraries, tutorials, and Stack Overflow Q&A.

Meanwhile, I want to learn a new programming language to refresh my brain. So, I choose Python.

My Knowledge Background

Actually, I am not totally new to Python. Several years ago, with the popularity of artificial intelligence, I followed the trend and learned Python for a while.

But I didn’t dig into Python. And with time passed, I forget most knowledge about it. Now, Python is truly a new language for me.

How to learn a new programming language?

In my opinion, programming is an art to imitate the real world. No matter which language, there are always date types such as number, string, boolean, there are always some data structures such as array, map, set. We need keywords such as if , for to control flow, we need libraries to send network requests.

With experience in JavaScript, I have the confidence to learn Python faster.

Tutoirals about Python

When I search tutorials for Python on Google, there are pretty many results. Um, they are great.

But there all have a problem: Almost all the tutorials assume that learners are totally new to programming.

They will explain what is variable, what is a function, what is a class, etc. These concepts are important for new coders, but it’s meanless for experienced coders.

So I’m trying to use a new way to learn Python.

The Series

Writing is a great way to save the thought eternally. I plan to start a series to record my experience to learn Python.

I will record:

How I learn Python
What are my thoughts on Python (maybe wrong)
What bugs I have met.
…

My Goal

Having a vivid goal is important. I am not learning Python itself, I am learning to use Python to finish real tasks.

My goals:

Write a robust web crawler in Python
Analysis data and create sheets by Python

Finally:

How did you learn Python?