/    Sign up×
Community /Pin to ProfileBookmark

Edit PHP code in “Browser developer tools” or another tool.

Dear community,

I am relatively recent with Web Development.

As PHP code is not seen by browsers, through my research so far, I could not find a way on a WordPress website, with some additional tool, to be able to see and edit the PHP code in Browser developer tools.

My rational behind this (but can be interpreted as silly due to my lack of experience) is; when PHP is providing function for an HTML code chunk, by also being able to edit PHP in Browser Developer Tools, I would see the visual changes reflect immediately; and make extra corrections before applying them in the file. Just like with CSS. As it really speeds things up, since you don’t need to save and refresh the page.

I am currently checking if through Visual Studio Code this can be achieved.

What do you recommend; [docker.com](https://docker.com) ?

Basically, would be great to get experienced web developers chime in, on what practice they use, to make WordPress Web Development with PHP, as fast as possible.

To make sure i am not missing a faster way of doing things.

I am using FTP and saving the edited files.

to post a comment

6 Comments(s)

Copy linkTweet thisAlerts:
@NogDogApr 29.2021 — I have not touched WordPress in several years now, but back when I did, if you logged into your WordPress site as an administrator (or whatever type of user they called it), you could edit relevant PHP files within the admin interface. Maybe a current WordPress developer can provide more info on the current way to do that?

Anyway...

As far as PHP development in general, we do use Docker containers, both for development and actual deployment. When working locally while developing, it is possible to map directories in the local docker container to your development code on your pc/laptop, allowing you in many cases to edit a PHP file, save it, and then immediately see the results via a localhost access to the container in any browser. So...Docker can be very useful for that, but the downside is that there is a non-trivial learning curve (and fortunately my immediate boss is a comparative expert on it ;) ).

Possibly a bit more straight-forward is to just run a web server locally, using something like XAMPP or wampserver to set up Apache, PHP, and MySQL on your pc/laptop. That's what I always used to do for personal projects, but again have not had any reason to touch it for some time now.
Copy linkTweet thisAlerts:
@appicodersApr 30.2021 — Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS, and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser's dev tools.
Copy linkTweet thisAlerts:
@49duvauthorApr 30.2021 — @NogDog#1631044

Thanks a lot for chiming in!

Glad you mentioned Docker. With it, can I edit files from the server locally (like with FTP) and when saving, the browser automatically refreshes?

With Xampp and http://livereload.com which i forgot to add in my OP this can be achieved.

The reason i'm working directly from the hosting provider live server, is to share the URL if needed for help, etc.
Copy linkTweet thisAlerts:
@49duvauthorApr 30.2021 — @appicoders#1631049

Yes, i am a little familiar with firefov dev tools.

But i am specifically asking about PHP :)

Btw you forgot to add the article. Can you please do so?
Copy linkTweet thisAlerts:
@NogDogApr 30.2021 — > @49duv#1631065 The reason i'm working directly from the hosting provider live server...

For me, the advantage of using Docker is specifically to avoid having to develop/test on a remote server. Rather, I use Docker to set up a local environment on my computer that closely emulates what will be used on the live server (or in the case how we use at work where we actually deploy Docker containers on the live web hosting -- essentially the exact same environment).

A quick bit of googling shows there are some SFTP and SSH extensions for VS Code that appear to allow you to edit code on remote servers, but I have no experience with any of them.
Copy linkTweet thisAlerts:
@49duvauthorApr 30.2021 — @NogDog#1631067

Yes, i am looking to purchase SSH access for my host and try VS Code. The next thing is automatic reload on firefox, with the files residing on the server.

That's the next bit of research 😀
×

Success!

Help @49duv spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...