How to pause browser execution when F8 is not working

Let’s break down a simple trick that can help you manipulate and understand your code better.

To begin with, access your developer console. This can usually be found in your browser’s Developer Tools under the ‘Console’ tab. Depending on the browser you’re using, you might need to use different shortcuts (like F12) or methods to open it. But don’t worry, a quick search on how to open the developer console in your specific browser should get you on the right track.

Once you’ve opened the console, the next step involves entering a particular command. All you need to do is simply paste the provided command line in the console. This is what we’re going to use to manipulate our code. After pasting the command, hit the ‘Enter’ key to execute it.

document.addEventListener('keydown', function (e) {

if (e.keyCode == 119) { // F8

debugger;

}

}, {

capture: true

});

Now, your code should still be in an ‘unpaused’ state. But when you press F8 on the keyboard, it should pause. It’s like freezing a moment in time, letting you thoroughly inspect and understand how your code behaves for specific elements. This can be especially useful when debugging hover-effects and mouseovers.

With this simple trick, your web development toolkit has a new superpower! Experiment, explore, and let your code reveal its secrets to you. Happy coding!”

Remove weird box characters from pasted text in VS Code

Today, we’ll be discussing a common issue you might encounter when copying and pasting text from other programs into Visual Studio Code.
At times, you may notice strange boxes appearing in your pasted text. These boxes represent unrecognized characters in VS Code. They usually occur due to discrepancies between character encoding standards across different programs.

If you’re looking for a quick fix to eliminate these, here’s a simple process you can follow:

First, select and copy one of these unknown box characters. Next, open up the ‘Replace’ dialog box. Paste the copied box character into the ‘Find’ field of the dialog box. Then, leave the ‘Replace’ field blank. Upon clicking ‘Replace All’, VS Code will replace all instances of this unrecognized character with nothing, essentially removing them from your text.

And there you have it! Your pasted text is now free of any unknown characters.

Thank you so much for watching and see you next time on OneMinuteVideoTutorials.com

How to fix the “Could not read source map for file” error when trying to setup Tensorflow.js

If you are getting a “Could not read source map for file” error in the console when trying to link to a JavaScript library like Tensorflow, the solution is simple. You propably don’t need the source map anyways unless you are planning to really digging into the code base of the library. So simply:

  1. Open the script file in your code editor
  2. Scroll all the way down
  3. Remove the source map link at the bottom of the file

How to keep using port 10080 after many browsers block it as an unsafe port

If you have been doing web development using port 10080 you might have run into some issues recently since many browsers including Chrome and Firefox have decided to add that port to their blocked ports list.

I use a tool called InstantWP for WordPress development and it’s using port 10080 for http by default.

I first researched the option to change the ports IWP is using. It seems like it could be done from the config file which you can open from the “Advanced” tab by clicking “Edit Config File”. In the file that opens you should see a setting called PortOffset. I tried to change that but couldn’t get it to work even after trying many different numbers for the port offset.

I also tried to add a flag into Chrome’s startup parameters by right-clicking the Chrome icon and choosing properties. Then I replaced the value under “target” with the following string:

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –explicitly-allowed-ports=10080

However that didn’t seem to fix the situation in my case. I still got the same “unsafe port” error from Chrome.

What finally helped was switching to Firefox and performing these steps:

  1. Type about:config to the address bar and click on the “accept the risk and continue” button.

Then paste in this string to the search bar:

network.security.ports.banned.override

Choose “string” as the type (I know, number would seem more logical), click on the + button and enter the port number you want to allow (in my case 10080).

Now you should be able to access applications via that port!

How to use Git with InstantWP

If you are using the amazing free InstantWP WordPress development package often, then you might start wondering how to properly use it with Git version control. The difficulty is that trying to add the entire Linux Alpine virtual operating system to Git is too heavy, but adding only the contents of the Theme folder will not keep track of your posts and other database related content. I will outline the steps I used to get Git working with IWP below:

Continue reading “How to use Git with InstantWP”