 Temos a Luz da Zatera Iberina de Ibama con nosotros, es ingeniera en Human Mate, unha de las agencias de walkers máis conocidas, está en ese centro en desarrollo backend e es unha fascinada de los sistemas de control e versiones. Le gusta a yoga, viajar e la fotografía e visita mochas walk-ups a lo largo do mundo. Non voy a enrollarme más. Un aplauso para Iberina. Can you do it? I barely understand what he said. I studied Spanish in school, but I kind of forgot most of island. So hi, I'm Iba. I work for Human Mate as work points engineer and today I will try to share some of my experience with debugging WordPress websites. I'm still a bit excited because I tried all these things in this museum. It's hilarious when you... but that thing with the visual reality is the worst nightmare ever. So, as you already know, I love traveling, I love work points community, I love taking pictures of sunset, like thousands of them. I sometimes work like that, somewhere in a nice place with a view and my laptop, but that really doesn't work well with some new screen and so on. So most of my day I'm debugging websites. And let's talk about that. So once upon a time when I was a little kid my grandfather was dealing with fixing cars. He was really good at that because he knew kind of how everything looks like, how to debug it, how to find the problem. But they passed so many years and the cars don't really look like that anymore. The engines don't really look like that. Actually there's a pretty good example in the museum for that as well. So the engines kind of look like this now and my grandfather doesn't really know how to do that anymore because even if you know how the system looks like and how it's supposed to work, it's not like this so it doesn't. So it's kind of something like this with the websites. So if you know how the structure is, how it's supposed to work and what might be the problem, there are situations where you have no idea where to start. So if you have a problem with let's say a legacy project that you haven't seen and you need to debug it and find the issue, where are you supposed to start? First of all, never ever debug a production. You make a lot of little kittens around the world set and you won't sleep for days and different things like that. So even if it's taking time and it's how frustrating from time to time, it's a good idea to spend some time and create your local environment and in the best case scenario you have local environment, different staging servers and you have time and environments to test everything well. You can after set your local environment set some debug constants in your config file so you'll be able to see the errors. You can of course set WP debug to true. You can get a WordPress debug log on your local instance. You can also display all these errors and also you can debug the CSS and JavaScript. This is very useful from time to time if you'll be able to show you the error even in the beginning of the project. It's not showing you what the problem is. What you can do is to start to know how the system works. Even if you know the basics of WordPress and how everything is set up, still you can be really surprised how many ways to complete something that looks simple. So first step is to check the system, how it works, how the project is done, are all the plugins and WordPress updated. Sometimes when you update everything some of the projects will just magically disappear. Unfortunately some of them will magically appear but that's a different story. Then what you can do is of course to check the error log. So if you're lucky and you have all the debug son, you'll be able to see where the problem is. You'll see kind of something like this. Pay the web in whatever file on whatever line and you just go there, fix it and everything will be fine. But unfortunately in a lot of cases what is happening is that you are getting something invalid argument on whatever for each plugin PHP that you've never touched and not, no one of your team touched. So there is problem somewhere but you still don't know where that is. So what happens then you can check for plugin conflicts. I had a very interesting case with 64 gigabytes of work by something like this. Just a plugin downloaded was introducing the same filter as the WordPress call and it was printing here like that without any clue where exactly this is happening. So yeah, it nearly encouraged my machine when I started the project properly. Yeah, so you can just start disabling plugins and checking so you can at least know in which directory the problem is and then start debugging from there. If that's kind of helping you already know where the problem is but you still don't know the exact place what you can do is start from there was known instance of that problem like whatever its function name or even HTML tag or CSS class or something that you know about the problem and just start grabbing the things around the code so you can form the logic what is calling code and how the things are structured so we can go to the initial problem. What you can also do is use some of the pre-built PHP function like Vardom whenever work they will be able to show you the output of the functions that of course you need to debug and you can see what is exactly happening in the code sometimes Vardom won't be able to show you this because of some Ajax code and so on so every work is kind of more reliable for me you have to keep in mind that it is looking for a string so you need to print it if there is object or a way or something like this that you need to output like not helping yet you can use some debugging plugins like Curing Monitor which is very useful for this it is showing you very obvious how things work which cure is coming from where what is called how much time it takes if that's big enough you'll be able to see that it shows what is called in which template how much time does it take and so on so you'll be able to check all the errors also you'll be able to see the performance of your code and if something needs to be fixed or it's too slow or it's calling the different template if that's not helping of course if you like it you can try doing it with xdebug it's a very helpful tool for PHP debugging I'm not the hugestpan but I also use it it just needs to be installed with the table package manager you are using for your system and configured it can also configured in your editor or IDE system that you use I personally use Atom because it's fast and it has a lot of extensions for specific WordPress development and debugging and the only thing that I need to do is change some configurations for the PHP configuration file and then add something like that in the editor but there is really good documentation for that so you'll be able to find the exact configuration for your system and then you can also use several tools like that for the browsers that takes the bug extension for Chrome it's also very logical and helps you debug the problems from there I don't really use Firefox but it says that it does the easiest debug tool for it, I'll trust it so you can try this as well and also how it looks after that so you can go to where you know the problem is just put the bug point and it will start following the code until there and in the best case scenario show you where there is I'm not the biggest fan just because in Atom at least the last time when I tried there was no option to change most of the debugging it always starts from the beginning of the execution of the code which is very slow for me but it can be really useful in a lot of cases also if you use WPC-A-Y and you are writing commands for W, C-A-Y, custom things for it you can just make a small change in your bash profile and you'll be able to debug C-A-Y will take the bug we just now using WPG instead of WP it's very useful if you are creating your custom WPC-A-Y commands and you need to see where the problems are then and then if all that is not helping there are so many cases related to these things called permissions so I had cases where there is just random error in a file with all that said to here it's not helping and then you just realize there is a wrong permission on the folder and the file can't be called so it's just taking a huge time for it another very very useful thing if you are lucky and you are working on a legacy project you have a git system you have any actually version control system and personally big value git you'll be able to see what happened in the code when the problem started you'll be able to check what happened in the history and it's going to be really fast and easy to debug unfortunately that's not usually the case so it's a really good idea to just start and set up your version control system when you start working on a particular project there are very useful things about git like for example you can try git log if you know and then there are some commits you'll be able to see at least who did the change why, when and kinda you have a idea well to look because you can look at the particular commit hash and then check what happened there is other very useful thing called git blame what it does is that you can just give it a particular file I need to show you the file with all the changes kept on each line so if you know well your bookies you'll be able to see who when introduced it and so on and of course if there is a commit message and anything related to version control you'll be able to see why there's other thing that I love it's called git bisect so if you know when a problem was introduced you can check the difference between the commit that is bad where there is a bug and a commit where it was good so you can start, you can just tell it git bisect start and then you're telling git git bisect bad is that does the commit where the problem is and git bisect good where the problem actually wasn't presented on your project so then on every reload you can tell git if that's a bad or good state of your project and when you finish it will tell you exactly at which state the problem was introduced it's crazy useful I just told it that's about running all things and when what if you want to introduce something new in a legacy project you can just go down the code and check if you have filters and actions where you can add new features instead of just adding them to plugins and so on that you haven't developed you can go down you can check what filters you have where you can change functions where you can add a functionality also you can remove functionality after you identify everything because from time to time there is no option for example to remove a functionality introduced by a plugin or team but there is a way to cook it for its place and introduce your change you have to keep in mind if you use to remove filter you can't remove something that is not there so it's supposed to go every time after the filter that you need to remove it's kind of the same with actions another very useful thing that can save you all that writing tests so if you are very lucky the project that you are working has real tests you can just go there and test and you'll see where the problem is without thinking of that I am personally real finance code exception it's really useful too for testing so you can use it for checking all the functionality from user perspective it basically just goes in there and performs the same actions that your user is supposed to do it's really easy to write tests on it and also it's able to xelénium server so you can also test JavaScript and everything is very interactive you can see how open browser and performs all the actions and you'll be able to check where the errors are so all that's it there is really good advice in the end of it it's a really good idea to standardize all that procedure you can also use automation so installing it making a real really easy process to make welcoming styles really useful is to have the databases or just install them that will be see why you can also use automation stuff like Jenkins to go and check the code and there are so many tools to help you with that so it's a really good thing to have all that standardize so when a new person is coming to your team or to your project he or she to be able to start very fast and not spending time on figuring it out how everything worked to why it was done this way and so on it's a really good thing to write documentation they're very useful the ideas the details so you can install something like this and just write documentations for your functions are quickies in GitHub or whatever is useful for your team but just leave the other people some instructions how to handle the project what the specifics are why these things work this way because it's one of my favorite comments in Stackover for Ovoxs after three days or three months you won't remember how did that work and why so it will help you and others to have really detailed documentation of everything and that's it does anybody has any questions for you Verlina? thank you Verlina you said you don't like the XD bar tool could you give us please some reasons why? yeah I said so because in the editor that I really love to use the extension for it the book is not very useful for me that's a specific case otherwise I use it but in the setup that I currently have I just don't like it that much it's a personal thing I thought it was more about something on the timing execution or something like that yeah because that's it how the extension for it works I don't know how exactly XD can do that two different things some things I use it's debug for do the filing of PHP execution and I don't know if you use it or there is any tool to do that well I kind of would place things use square monitor because it shows very obvious how much time is taking very clearly where it comes what is calling code and so on as you said I'm personally not a huge fan of XD but that's my personal thinking and more questions so big applause for Verlina